Merge pull request #9707 from kazekyo/fix_usesubscription_in_strict_mode

Fix useSubscription bug in React v18 <StrictMode> (#9664)
apollographql · May 16, 2022 · 4571e1a · 4571e1a
2 parents 5be85a0 + e62f8f6
commit 4571e1a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,9 @@
 - Guarantee `Concast` cleanup without `Observable cancelled prematurely` rejection, potentially solving long-standing issues involving that error. <br/>
   [@benjamn](https://github.com/benjamn) in [#9701](https://github.com/apollographql/apollo-client/pull/9701)
 
+- Ensure `useSubscription` subscriptions are properly restarted after unmounting/remounting by React 18 in `<StrictMode>`. <br/>
+  [@benjamn](https://github.com/benjamn) in [#9707](https://github.com/apollographql/apollo-client/pull/9707)
+
 ### Improvements
 
 - Internalize `useSyncExternalStore` shim, for more control than `use-sync-external-store` provides, fixing some React Native issues. <br/>

diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     {
       "name": "apollo-client",
       "path": "./dist/apollo-client.min.cjs",
-      "maxSize": "29.45kB"
+      "maxSize": "29.5kB"
     }
   ],
   "engines": {

diff --git a/src/react/hooks/useSubscription.ts b/src/react/hooks/useSubscription.ts
@@ -38,6 +38,13 @@ export function useSubscription<TData = any, TVariables = OperationVariables>(
     });
   });
 
+  const canResetObservableRef = useRef(false);
+  useEffect(() => {
+    return () => {
+      canResetObservableRef.current = true;
+    };
+  }, []);
+
   const ref = useRef({ client, subscription, options });
   useEffect(() => {
     let shouldResubscribe = options?.shouldResubscribe;
@@ -46,23 +53,24 @@ export function useSubscription<TData = any, TVariables = OperationVariables>(
     }
 
     if (options?.skip) {
-      if (!options?.skip !== !ref.current.options?.skip) {
+      if (!options?.skip !== !ref.current.options?.skip || canResetObservableRef.current) {
         setResult({
           loading: false,
           data: void 0,
           error: void 0,
           variables: options?.variables,
         });
         setObservable(null);
+        canResetObservableRef.current = false;
       }
     } else if (
-      shouldResubscribe !== false && (
-        client !== ref.current.client ||
-        subscription !== ref.current.subscription ||
-        options?.fetchPolicy !== ref.current.options?.fetchPolicy ||
-        !options?.skip !== !ref.current.options?.skip ||
-        !equal(options?.variables, ref.current.options?.variables)
-      )
+      (shouldResubscribe !== false &&
+        (client !== ref.current.client ||
+          subscription !== ref.current.subscription ||
+          options?.fetchPolicy !== ref.current.options?.fetchPolicy ||
+          !options?.skip !== !ref.current.options?.skip ||
+          !equal(options?.variables, ref.current.options?.variables))) ||
+      canResetObservableRef.current
     ) {
       setResult({
         loading: true,
@@ -76,10 +84,11 @@ export function useSubscription<TData = any, TVariables = OperationVariables>(
         fetchPolicy: options?.fetchPolicy,
         context: options?.context,
       }));
+      canResetObservableRef.current = false;
     }
 
     Object.assign(ref.current, { client, subscription, options });
-  }, [client, subscription, options]);
+  }, [client, subscription, options, canResetObservableRef.current]);
 
   useEffect(() => {
     if (!observable) {