React 18 subscriptions failing

[jmparsons]

The useSubscription hook using React 18 results in subscriptionFailedCallback.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'subscriptionFailedCallback')

Line throwing error here:

https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/master/packages/aws-appsync-subscription-link/src/realtime-subscription-handshake-link.ts#L336

I've tried non strict already and also the alpha 3.7 of apollo client, same undefined failed callback.

Possibly related to:

https://github.com/apollographql/apollo-client/issues/7608

[ryancrunchi]

Possible duplicate of https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/509

[butterybread]

I am experiencing this issue only when using StrictMode. I am using subscribeToMore from useQuery. I am not using useSubscription.

The following effect is run twice because of StrictMode.

useEffect(() => {
  console.log("useEffect");
  const unsubscribe = subscribeToMore({
    document: BASIC_SUBSCRIPTION,
    onError: console.error,
    updateQuery: (prev, { subscriptionData }) => {
      //
    },
  });
  return () => {
    console.log("cleanup");
    unsubscribe();
  };
}, [subscribeToMore]);

When I disable StrictMode, I no longer have the error.

I am using versions:

"@apollo/client": "^3.6.9",
"aws-appsync-auth-link": "^3.0.7",
"aws-appsync-subscription-link": "^3.1.0",

I guess this should work without an error, even in StrictMode?

[jmparsons]

I'll try this on my end and see if it works @Stijnkool

[jmparsons]

@Stijnkool that was it! I'm using next.js, so I had to updated the next config to set the strict mode to false. I'm going to close this ticket, since it looks like I need to implement cleaning up the methods, rather than a lib change. Thanks!

[Hideman85]

@jmparsons Thanks for this issue we are having the exact same troubles. Would you mind to share how you solved it while still having StrictMode on? I guess that would help other persons too, thanks in advance :slightly_smiling_face:

[jmparsons]

@Hideman85 I'd need to test it out myself with strict mode on. We use subscribeToMore and some generated subscription hooks, but for now we haven't re-activated strict mode.

[butterybread]

@Hideman85 as far as I know, this has not been fixed. I still get the error. But I guess it should not happen in production because strictmode is disabled in that scenario. But this error should not be thrown even with strictmode on. So no fix at the moment I think.

[pehel]

Having the same issue in nextjs with both strictmode on and off.

[jmparsons]

@pehel after you change strict mode:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: false,
};

Restart your app from the cli. See if it works then, I had to restart it myself.

[hoquescript]

const ref = useRef(false);
  useEffect(() => {
    setTimeout(() => {
      if (!ref.current) {
        subscribeToMore();
        ref.current = true;
      }
    }, 1000);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

This hack worked for me. It wont add data to cache as well as it will block invoking useEffect twice