(Batch)HttpLink: Propagate AbortErrors with user-provided signals (#1…

…1058)

Propagate `AbortError`s to the user when a user-provided `signal` is passed to the link. Previously, these links would swallow all `AbortErrors`, potentially causing queries and mutations to never resolve. As a result of this change, users are now expected to handle `AbortError`s when passing in a user-provided `signal`.

.changeset/polite-pianos-kiss.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': minor
+---
+
+(Batch)HttpLink: Propagate `AbortError`s to the user when a user-provided `signal` is passed to the link. Previously, these links would swallow all `AbortErrors`, potentially causing queries and mutations to never resolve. As a result of this change, users are now expected to handle `AbortError`s when passing in a user-provided `signal`.

src/config/jest/setup.ts

@@ -9,3 +9,10 @@ gql.disableFragmentWarnings();
 process.on('unhandledRejection', () => {});
 
 loadErrorMessageHandler();
+
+function fail(reason = "fail was called in a test.") {
+  expect(reason).toBe(undefined);
+}
+
+// @ts-ignore
+globalThis.fail = fail;

src/link/batch-http/__tests__/batchHttpLink.ts

@@ -1064,7 +1064,7 @@ describe('SharedHttpTest', () => {
     }
 
     function mockFetch() {
-      const text = jest.fn(async () => '{}');
+      const text = jest.fn(async () => '{ "data": { "stub": { "id": "foo" } } }');
       const fetch = jest.fn(async (uri, options) => ({ text }));
       return { text, fetch }
     }
@@ -1095,6 +1095,20 @@ describe('SharedHttpTest', () => {
       expect(fetch.mock.calls[0][1]).toEqual(expect.objectContaining({ signal: externalAbortController.signal }))
     });
 
+    it('aborting the internal signal will not cause an error', async () => {
+      try { 
+        fetchMock.restore();
+        fetchMock.postOnce('data', async () => '{ "data": { "stub": { "id": "foo" } } }');
+        const abortControllers = trackGlobalAbortControllers();
+
+        const link = createHttpLink({ uri: '/data' });
+        execute(link, { query: sampleQuery } ).subscribe(failingObserver);
+        abortControllers[0].abort();
+      } finally {
+        fetchMock.restore();
+      }
+    });
+
     it('resolving fetch does not cause the AbortController to be aborted', async () => {
       const { text, fetch } = mockFetch();
       const abortControllers = trackGlobalAbortControllers();

src/link/batch-http/batchHttpLink.ts

@@ -179,8 +179,6 @@ export class BatchHttpLink extends ApolloLink {
           })
           .catch(err => {
             controller = undefined;
-            // fetch was cancelled so its already been cleaned up in the unsubscribe
-            if (err.name === 'AbortError') return;
             // if it is a network error, BUT there is graphql result info
             // fire the next observer before calling error
             // this gives apollo-client (and react-apollo) the `graphqlErrors` and `networkErrors`

src/link/http/__tests__/HttpLink.ts

@@ -1359,7 +1359,7 @@ describe('HttpLink', () => {
       }
 
       function mockFetch() {
-        const text = jest.fn(async () => '{}');
+        const text = jest.fn(async () => '{ "data": { "stub": { "id": "foo" } } }');
         const fetch = jest.fn(async (uri, options) => ({ text }));
         return { text, fetch }
       }
@@ -1390,6 +1390,28 @@ describe('HttpLink', () => {
         expect(fetch.mock.calls[0][1]).toEqual(expect.objectContaining({ signal: externalAbortController.signal }))
       });
 
+      it('a passed-in signal that is cancelled will fail the observable with an `AbortError`', async () => {
+        try { 
+          fetchMock.restore();
+          fetchMock.postOnce('data', async () => '{ "data": { "stub": { "id": "foo" } } }');
+
+          const externalAbortController = new AbortController();
+
+          const link = createHttpLink({ uri: '/data', fetchOptions: { signal: externalAbortController.signal } });
+
+          const error = await new Promise<Error>(resolve => {
+            execute(link, { query: sampleQuery } ).subscribe({
+              ...failingObserver,
+              error: resolve,
+            });
+            externalAbortController.abort();
+          });
+          expect(error.name).toBe("AbortError")
+        } finally {
+          fetchMock.restore();
+        }
+      });
+
       it('resolving fetch does not cause the AbortController to be aborted', async () => {
         const { text, fetch } = mockFetch();
         const abortControllers = trackGlobalAbortControllers();

src/link/http/parseAndCheckHttpResponse.ts

@@ -161,7 +161,6 @@ export function parseJsonBody<T>(response: Response, bodyText: string): T {
 }
 
 export function handleError(err: any, observer: SubscriptionObserver<any>) {
-  if (err.name === "AbortError") return;
   // if it is a network error, BUT there is graphql result info fire
   // the next observer before calling error this gives apollo-client
   // (and react-apollo) the `graphqlErrors` and `networkErrors` to