after upgrade 3.x, multi error: Uncaught (in promise) DOMException: The user aborted a request.

[wukong1995]

Intended outcome:
no error

Actual outcome:
in chrome console, always throw error: Uncaught (in promise) DOMException: The user aborted a request.

How to reproduce the issue:
I did not find a solution. so i open this issue.

my conf:

const httpLink = createHttpLink({
  uri,
  credentials: 'include',
  headers: {  },
  fetchOptions: {
    mode: 'cors'
  }
})

const middlewareLink = setContext(request => {
  const name =
    request.query.definitions[0].selectionSet.selections[0].name.value

  return {
    headers: {
      'X-graphql': name
    }
  }
})

const errorLink = onError(({ networkError }) => {
  if (!networkError) {
    return
  }
    
  // resolve networkErro
})

const link = middlewareLink.concat(errorLink.concat(httpLink))

const cache = new InMemoryCache()

const client = new ApolloClient({
  link,
  cache: cache.restore(initialState),
  defaultOptions: {
    query: {
      fetchPolicy: 'network-only'
    }
  }
})

polyfill:

import 'unfetch/polyfill'
import 'core-js/modules/es7.promise.finally'

Versions

"@apollo/client": "3.1.2",
"graphql": "15.3.0",
"graphql-tag": "2.10.4",

[wukong1995]

I add singal in fetchOptions, and fix it.

const abortController = new AbortController();
// xxx
fetchOptions: {
    mode: "cors",
    signal: abortController.signal,
  },
// xxx

[diao1v]

I add singal in fetchOption, and fix it.

I had the same issue. Not really understand what should I add with the "signal", could you provide more details? Thanks!

[cescoferraro]

@Tuicaodan I also facing the same issue
@wukong1995 can you please elaborate, or reopen the issue

[diao1v]

@cescoferraro I was able to fix the issue by adding this in the "apollo config section". Here is my code of this section:

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { onError } from "@apollo/client/link/error";

const abortController = new AbortController();

const httpLink = createHttpLink({
  uri: "http://localhost:4000/graphql",
  fetchOptions: {
    mode: "cors",
    signal: abortController.signal,
  },
});

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem("token");
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

const errorLink = onError(({ networkError }) => {
  if (!networkError) {
    return;
  }
});

const graphQLClient = new ApolloClient({
  link: authLink.concat(errorLink.concat(httpLink)),
  cache: new InMemoryCache(),
});

export default graphQLClient;

[cescoferraro]

@Tuicaodan thanks! I will give it a try

[cescoferraro]

it works thanks @Tuicaodan

[luin]

Just a quick note in case someone encounters the same issue. In our case, the issue comes from LogRocket that whenever a query completes, Apollo sends an abort signal via the AbortControler during the cleanup process in order to cancel all in-flight queries. However, LogRocket wraps the global fetch to track network requests, and it doesn't catch and ignore the abort error, causing every apollo query triggers an exception on the console.

Passing signal to fetchOptions actually void Apollo's cleanup process so it has side effects though it avoids exceptions.

I created an issue on LogRocket's repo: https://github.com/LogRocket/logrocket/issues/34. If you are not using LogRocket, can also follow the issue to make sure you do catch and ignore any abort exceptions.