do not overwrite own AbortSignal if an external AbortSignal is passed in

Author: phryneas

.changeset/quiet-balloons-wave.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix a situation where a passed-in `AbortSignal` would override internal unsubscription cancellation behaviour.

src/link/http/createHttpLink.ts

@@ -29,6 +29,8 @@ import { serializeFetchParameter } from "./serializeFetchParameter.js";
 
 const backupFetch = maybe(() => fetch);
 
+function noop() {}
+
 export const createHttpLink = (linkOptions: HttpLink.Options = {}) => {
   let {
     uri = "/graphql",
@@ -106,11 +108,29 @@ export const createHttpLink = (linkOptions: HttpLink.Options = {}) => {
       );
     }
 
-    let controller: AbortController | undefined;
-    if (!options.signal && typeof AbortController !== "undefined") {
-      controller = new AbortController();
-      options.signal = controller.signal;
+    let controller: AbortController | undefined = new AbortController();
+    let cleanupController = () => {
+      controller = undefined;
+    };
+    if (options.signal) {
+      // in an ideal world we could use `AbortSignal.any` here, but
+      // React Native uses https://github.com/mysticatea/abort-controller as
+      // a polyfill for `AbortController`, and it does not support `AbortSignal.any`.
+      const abort = controller.abort.bind(controller);
+      options.signal.addEventListener("abort", abort, { once: true });
+      cleanupController = () => {
+        controller = undefined;
+        // on cleanup, we need to stop listening to `options.signal` to avoid memory leaks
+        options.signal.removeEventListener("abort", abort);
+        cleanupController = noop;
+      };
+      // react native also does not support the addEventListener `signal` option
+      // so we have to simulate that ourself
+      controller.signal.addEventListener("abort", cleanupController, {
+        once: true,
+      });
     }
+    options.signal = controller.signal;
 
     // If requested, set method to GET if there are no mutations.
     const definitionIsMutation = (d: DefinitionNode) => {
@@ -181,11 +201,11 @@ export const createHttpLink = (linkOptions: HttpLink.Options = {}) => {
           }
         })
         .then(() => {
-          controller = undefined;
+          cleanupController();
           observer.complete();
         })
         .catch((err) => {
-          controller = undefined;
+          cleanupController();
           handleError(err, observer);
         });