Make stopPolling / startPolling a no-op after unmount

Changelog.md

@@ -2,6 +2,11 @@
 
 ## 3.1.1 (not yet released)
 
+### Improvements
+
+- Calling `startPolling` or `stopPolling` after a component has unmounted is now a no-op (instead of throwing an exception). Polling is automatically stopped when a component is unmounted, so it doesn't need to be called manually. <br/>
+  [@hwillson](https://github.com/hwillson) in [#3485](https://github.com/apollographql/react-apollo/pull/3485)
+
 ### Bug Fixes
 
 - A fix has been applied to prevent an unchanging `loading` state when an error occurs after a refetch, that is the same as the previous error. <br/>
@@ -34,6 +39,8 @@
   [@hwillson](https://github.com/hwillson) in [#3458](https://github.com/apollographql/react-apollo/pull/3458)
 - Prevent duplicate `onCompleted` calls during the same query execution cycle. <br/>
   [@hwillson](https://github.com/hwillson) in [#3461](https://github.com/apollographql/react-apollo/pull/3461)
+- Make sure polling is stopped when a component is unmounted. <br/>
+  [@dqunbp](https://github.com/dqunbp) in [#3273](https://github.com/apollographql/react-apollo/pull/3273)
 - Documentation fixes. <br/>
   [@SeanRoberts](https://github.com/SeanRoberts) in [#3380](https://github.com/apollographql/react-apollo/pull/3380)
 

package.json

@@ -92,7 +92,7 @@
     {
       "name": "@apollo/react-hooks",
       "path": "./packages/hooks/lib/react-hooks.cjs.min.js",
-      "maxSize": "4.1 kB"
+      "maxSize": "4.2 kB"
     },
     {
       "name": "@apollo/react-ssr",

packages/hooks/src/__tests__/useQuery.test.tsx

@@ -254,6 +254,47 @@ describe('useQuery Hook', () => {
       );
     });
 
+    it(
+      'should not throw an error if `stopPolling` is called manually after ' +
+        'a component has unmounted (even though polling has already been ' +
+        'stopped automatically)',
+      async () => {
+        let unmount: any;
+        let renderCount = 0;
+        const Component = () => {
+          const { data, loading, stopPolling } = useQuery(CAR_QUERY, {
+            pollInterval: 10
+          });
+          switch (renderCount) {
+            case 0:
+              expect(loading).toBeTruthy();
+              break;
+            case 1:
+              expect(loading).toBeFalsy();
+              expect(data).toEqual(CAR_RESULT_DATA);
+              setTimeout(() => {
+                unmount();
+                stopPolling();
+              });
+              break;
+            default:
+          }
+          renderCount += 1;
+          return null;
+        };
+
+        unmount = render(
+          <MockedProvider mocks={CAR_MOCKS}>
+            <Component />
+          </MockedProvider>
+        ).unmount;
+
+        await wait(() => {
+          expect(renderCount).toBe(2);
+        });
+      }
+    );
+
     it('should set called to true by default', () => {
       const Component = () => {
         const { loading, called } = useQuery(CAR_QUERY);

packages/hooks/src/data/QueryData.ts

@@ -467,10 +467,17 @@ export class QueryData<TData, TVariables> extends OperationData {
     ) => TData
   ) => this.currentObservable.query!.updateQuery(mapFn);
 
-  private obsStartPolling = (pollInterval: number) =>
-    this.currentObservable.query!.startPolling(pollInterval);
+  private obsStartPolling = (pollInterval: number) => {
+    this.currentObservable &&
+      this.currentObservable.query! &&
+      this.currentObservable.query!.startPolling(pollInterval);
+  };
 
-  private obsStopPolling = () => this.currentObservable.query!.stopPolling();
+  private obsStopPolling = () => {
+    this.currentObservable &&
+      this.currentObservable.query! &&
+      this.currentObservable.query!.stopPolling();
+  };
 
   private obsSubscribeToMore = <
     TSubscriptionData = TData,