5

I have a project using React in Strict Mode alongside GraphQL.

I updated some packages, and I now get the following error in useEffect containing async calls.

  useEffect(() => {
    const loadTags = async () => {
      const { data } = await fetchTags();
      setTags([...(data?.tags || [])]);
    };

    loadTags();
  }, [current, fetchTags]);

DOMException: signal is aborted without reason in useEffect with async call.

I am not quite sure what is causing this, I believe the use effect rerun and clear itself up, and it doesn't abort the query properly.

This didn't happen previously, or at least didn't produce an error.

I am wondering if my implementation if incorrect, or if some package I updated go an issue, I couldn't find any relevant thread on github on the package I updated

Bobby
  • 4,372
  • 8
  • 47
  • 103

1 Answers1

5

I have also the same issue after upgrading the @apollo/client library from version 3.7.1 to 3.7.8, when using useLazyQuery (probably the same with useQuery).

The bug was introduced with version 3.7.4.

Until a fix is provided by Apollo, the solution is to downgrade to version <= 3.7.3.

Here is the stack trace (for reference):

useLazyQuery.ts:78 Uncaught (in promise) DOMException: signal is aborted without reason
    at http://localhost:3000/node_modules/.vite/deps/@apollo_client.js?v=d5c2e0d9:8702:20
    at Set.forEach (<anonymous>)
    at http://localhost:3000/node_modules/.vite/deps/@apollo_client.js?v=d5c2e0d9:8701:35
    at safelyCallDestroy (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:16737:13)
    at commitHookEffectListUnmount (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:16864:19)
    at invokePassiveEffectUnmountInDEV (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:18359:19)
    at invokeEffectsInDev (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19697:19)
    at commitDoubleInvokeEffectsInDEV (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19678:15)
    at flushPassiveEffectsImpl (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19499:13)
    at flushPassiveEffects (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19443:22)
Guicara
  • 1,668
  • 2
  • 20
  • 34
  • Do you have link to the issue? – BMH Mar 13 '23 at 11:59
  • 1
    @BMH there is [a similar issue here](https://github.com/apollographql/apollo-client/issues/10520) in the Apollo Client GitHub repository. – Guicara Mar 13 '23 at 12:06
  • 1
    By the way, this issue only happens when StrictMode is enabled. As explained by jerelmiller in above link, a temporary solution is to create a custom hook that extends `useLazyQuery`, wrap everything in try/catch, and not raise an error for `AbortError`. However, it's not a great solution. For me, it's clearly a bug and a breaking change because it was working fine with version `<= 3.7.3`. – Guicara Mar 13 '23 at 12:12