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

Question

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

GuicaraGuicara 1,6682 gold badges20 silver badges34 bronze badges · Accepted Answer · 2023-02-18 21:00:02Z

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 https://localhost:3000/node_modules/.vite/deps/@apollo_client.js?v=d5c2e0d9:8702:20
    at Set.forEach (<anonymous>)
    at https://localhost:3000/node_modules/.vite/deps/@apollo_client.js?v=d5c2e0d9:8701:35
    at safelyCallDestroy (https://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:16737:13)
    at commitHookEffectListUnmount (https://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:16864:19)
    at invokePassiveEffectUnmountInDEV (https://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:18359:19)
    at invokeEffectsInDev (https://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19697:19)
    at commitDoubleInvokeEffectsInDEV (https://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19678:15)
    at flushPassiveEffectsImpl (https://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19499:13)
    at flushPassiveEffects (https://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19443:22)

@BMH there is a similar issue here in the Apollo Client GitHub repository. — Mar 13 at 12:06
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. — Mar 13 at 12:12

Bernardo EnockBernardo Enock 1 · Accepted Answer · 2023-09-19 14:12:33Z

0

In my case, it is a Next JS project, I set the reactStrictMode of the next.config.js file to false and it ran normally with version 3.7.10

 /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true
  },
  eslint: {
    ignoreDuringBuilds: true
  }
}

module.exports = nextConfig

answered 50 mins ago

Bernardo Enock

1

New contributor

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