(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)

apollo-client/src/link/batch-http/batchHttpLink.ts

Lines 231 to 234 in d502a69

	return () => {
	// XXX support canceling this request
	// https://developers.google.com/web/updates/2017/09/abortable-fetch
	if (controller) controller.abort();

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:

apollo-client/src/link/http/createHttpLink.ts

Lines 210 to 213 in d502a69

	return () => {
	// XXX support canceling this request
	// https://developers.google.com/web/updates/2017/09/abortable-fetch
	if (controller) controller.abort();

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]

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]

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.