ObservableQuery.getCurrentResult: skip the cache

.vscode/settings.json

@@ -7,5 +7,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.enableFiletypes": [
     "mdx"
-  ]
+  ],
+  "jest.jestCommandLine": "node_modules/.bin/jest --config ./config/jest.config.js --ignoreProjects 'ReactDOM 17' --runInBand",
 }

src/core/ObservableQuery.ts

@@ -28,6 +28,7 @@ import {
   FetchMoreQueryOptions,
   SubscribeToMoreOptions,
   NextFetchPolicyContext,
+  WatchQueryFetchPolicy,
 } from './watchQueryOptions';
 import { QueryInfo } from './QueryInfo';
 import { MissingFieldError } from '../cache';
@@ -86,6 +87,7 @@ export class ObservableQuery<
   private observers = new Set<Observer<ApolloQueryResult<TData>>>();
   private subscriptions = new Set<ObservableSubscription>();
 
+  private waitForOwnResult: boolean;
   private last?: Last<TData, TVariables>;
 
   private queryInfo: QueryInfo;
@@ -152,6 +154,7 @@ export class ObservableQuery<
     this.queryManager = queryManager;
 
     // active state
+    this.waitForOwnResult = skipCacheDataFor(options.fetchPolicy);
     this.isTornDown = false;
 
     const {
@@ -240,9 +243,8 @@ export class ObservableQuery<
     if (
       // These fetch policies should never deliver data from the cache, unless
       // redelivering a previously delivered result.
-      fetchPolicy === 'network-only' ||
-      fetchPolicy === 'no-cache' ||
-      fetchPolicy === 'standby' ||
+      skipCacheDataFor(fetchPolicy) ||
+      this.waitForOwnResult ||
       // If this.options.query has @client(always: true) fields, we cannot
       // trust diff.result, since it was read from the cache without running
       // local resolvers (and it's too late to run resolvers now, since we must
@@ -834,13 +836,22 @@ Did you mean to call refetch(variables) instead of refetch({ variables })?`);
       }
     }
 
+    this.waitForOwnResult &&= skipCacheDataFor(options.fetchPolicy)
+    const finishWaitingForOwnResult = () => {
+      if (this.concast === concast) {
+        this.waitForOwnResult = false
+      }
+    }
+
     const variables = options.variables && { ...options.variables };
     const concast = this.fetch(options, newNetworkStatus);
     const observer: Observer<ApolloQueryResult<TData>> = {
       next: result => {
+        finishWaitingForOwnResult();
         this.reportResult(result, variables);
       },
       error: error => {
+        finishWaitingForOwnResult();
         this.reportError(error, variables);
       },
     };
@@ -984,3 +995,7 @@ export function logMissingFieldErrors(
     }`, missing);
   }
 }
+
+function skipCacheDataFor(fetchPolicy?: WatchQueryFetchPolicy) {
+  return fetchPolicy === "network-only" || fetchPolicy === "no-cache" || fetchPolicy === "standby";
+}

src/react/hoc/__tests__/queries/loading.test.tsx

@@ -421,7 +421,7 @@ describe('[queries] loading', () => {
       ]);
     }, { interval: 1 });
     await waitFor(() => {
-      expect(count).toBe(6);
+      expect(count).toBe(5);
     }, { interval: 1 });
   });
 

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, ReactNode, useEffect, useState } from 'react';
 import { DocumentNode, GraphQLError } from 'graphql';
 import gql from 'graphql-tag';
 import { act } from 'react-dom/test-utils';
@@ -1758,14 +1758,14 @@ describe('useQuery Hook', () => {
         expect(result.current.data).toEqual({ hello: "world 1" });
       }, { interval: 1 });
       expect(result.current.loading).toBe(false);
-      
+
 
       await waitFor(() => {
         expect(result.current.data).toEqual({ hello: "world 2" });
       }, { interval: 1 });
       expect(result.current.loading).toBe(false);
-      
-      
+
+
       result.current.stopPolling();
 
       await expect(waitFor(() => {
@@ -5941,6 +5941,84 @@ describe('useQuery Hook', () => {
     });
   });
 
+  // https://github.com/apollographql/apollo-client/issues/10222
+  describe('regression test issue #10222', () => {
+    it('maintains initial fetch policy when component unmounts and remounts', async () => {
+      let helloCount = 1;
+      const query = gql`{ hello }`;
+      const link = new ApolloLink(() => {
+        return new Observable(observer => {
+          const timer = setTimeout(() => {
+            observer.next({ data: { hello: `hello ${helloCount++}` } });
+            observer.complete();
+          }, 50);
+
+          return () => {
+            clearTimeout(timer);
+          }
+        })
+      })
+
+      const cache = new InMemoryCache();
+
+      const client = new ApolloClient({
+        link,
+        cache
+      });
+
+      let setShow: Function
+      const Toggler = ({ children }: { children: ReactNode }) => {
+        const [show, _setShow] = useState(true);
+        setShow = _setShow;
+
+        return show ? <>{children}</> : null;
+      }
+
+      const { result } = renderHook(
+        () => useQuery(query, {
+            fetchPolicy: 'network-only',
+            nextFetchPolicy: 'cache-first'
+          }),
+        {
+          wrapper: ({ children }) => (
+            <ApolloProvider client={client}>
+              <Toggler>{children}</Toggler>
+            </ApolloProvider>
+          ),
+        },
+      );
+
+      expect(result.current.loading).toBe(true);
+      expect(result.current.data).toBeUndefined();
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.data).toEqual({ hello: 'hello 1' });
+      expect(cache.readQuery({ query })).toEqual({ hello: 'hello 1' })
+
+      act(() => {
+        setShow(false);
+      });
+
+      act(() => {
+        setShow(true);
+      });
+
+      expect(result.current.loading).toBe(true);
+      expect(result.current.data).toBeUndefined();
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      })
+
+      expect(result.current.data).toEqual({ hello: 'hello 2' });
+      expect(cache.readQuery({ query })).toEqual({ hello: 'hello 2' })
+    });
+  });
+
+
   describe('defer', () => {
     it('should handle deferred queries', async () => {
       const query = gql`
@@ -6985,7 +7063,7 @@ describe('useQuery Hook', () => {
         expect(requestSpy).toHaveBeenCalledTimes(shouldFetchOnFirstRender ? 1 : 0);
 
         // We need to wait a moment before the rerender for everything to settle down.
-        // This part is unfortunately bound to be flaky - but in some cases there is 
+        // This part is unfortunately bound to be flaky - but in some cases there is
         // just nothing to "wait for", except "a moment".
         await act(() => new Promise((resolve) => setTimeout(resolve, 10)));