(Batch)HttpLink Uncaught (in promise)DOMException: signal is aborted without reason

[Cellule]

Issue Description

Similar issue as #10520 but happens when using BatchHttpLink It seems the abort here causes an error to surface up when navigating quickly between pages (aka when useQuery cancels a request) https://github.com/apollographql/apollo-client/blob/d502a69654d8ffa31e09467da028304a934a9874/src/link/batch-http/batchHttpLink.ts#L231-L234

I'm not sure how I can handle this on my side or if it's something that needs to be fixed in batch-http-link class

Link to Reproduction

I tried, I really tried

Reproduction Steps

• Use BatchHttpLink as a linker
• Have 2 pages each with a different useQuery with fetchPolicy network-only
• Quickly navigate between the 2 pages
• The error appears in the console

@apollo/client version

3.10.4

[jerelmiller]

Hey @Cellule 👋

Thanks for the report! By chance do you see the same thing with HttpLink, or just BatchHttpLink? FWIW we do the same thing in HttpLink here: https://github.com/apollographql/apollo-client/blob/d502a69654d8ffa31e09467da028304a934a9874/src/link/http/createHttpLink.ts#L210-L213

If you're not seeing this issue in HttpLink, I think that gives us a place to start.

[Cellule]

I just tested and indeed same behavior with HttpLink.

[Cellule]

I'm close to get a minimal repro. Manage to at least setup http link in code sandbox at least, but it's not reproing in my setup yet I'll try again a little later, not 100% sure what else I have on my real setup that might affect this See current setup here Navigating quickly between Home and Home2 causes to cancel the request, but no repro yet

[Cellule]

Alright, we finally managed to find the problem. Turns out it has nothing to do with HttpLink. We had some custom fetch response handling that was now getting a rejection from the fetch abort

I have updated the repro above showing the issue.

In essence we had code looking like this

const httpLink = new HttpLink({
  uri: `/graphql`,
  fetch: (...args) => {
    const res = fetch(...args);
    res.then(
      (value) => {
        // inspect response headers to update application state
      },
      // This was missing, so the rejection from fetch was unhandled in this .then()
      // Causing to print the error
      // (err) => {/* Ignore fetch errors */}
    );
    return res;
  },
});

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[jerelmiller]

Glad you found the source of the issue! Appreciate you letting us know! Have a great rest of your day 🙂

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.