RFC: Allow fetching to be forced to true by exchanges

src/exchanges/cache.ts

@@ -57,16 +57,19 @@ export const cacheExchange: Exchange = ({ forward, client }) => {
       filter(op => !shouldSkip(op) && isOperationCached(op)),
       map(operation => {
         const cachedResult = resultCache.get(operation.key);
-        if (operation.context.requestPolicy === 'cache-and-network') {
-          reexecuteOperation(client, operation);
-        }
-
-        return {
+        const result: OperationResult = {
           ...cachedResult,
           operation: addMetadata(operation, {
             cacheOutcome: cachedResult ? 'hit' : 'miss',
           }),
         };
+
+        if (operation.context.requestPolicy === 'cache-and-network') {
+          result.fetching = true;
+          reexecuteOperation(client, operation);
+        }
+
+        return result;
       })
     );
 

src/hooks/useMutation.ts

@@ -47,8 +47,8 @@ export const useMutation = <T = any, V = object>(
         client.executeMutation(request, context || {}),
         toPromise
       ).then(result => {
-        const { data, error, extensions } = result;
-        setState({ fetching: false, data, error, extensions });
+        const { fetching, data, error, extensions } = result;
+        setState({ fetching: fetching || false, data, error, extensions });
         return result;
       });
     },

src/hooks/useQuery.spec.ts

@@ -303,4 +303,37 @@ describe('useQuery', () => {
     rerender({ query: mockQuery, variables: mockVariables, pause: true });
     expect(client.executeQuery).toBeCalledTimes(1);
   });
+
+  it('should keep fetching at true when the result instructs it to', async () => {
+    client.executeQuery.mockImplementationOnce(() =>
+      pipe(
+        interval(400),
+        map(() => ({
+          fetching: true,
+          data: { test: true },
+        }))
+      )
+    );
+
+    const { result, waitForNextUpdate } = renderHook(
+      ({ query, variables }) => useQuery({ query, variables }),
+      {
+        initialProps: {
+          query: mockQuery,
+          variables: mockVariables,
+        },
+      }
+    );
+
+    await waitForNextUpdate();
+    expect(client.executeQuery).toBeCalledTimes(1);
+
+    const [state] = result.current;
+    expect(state).toEqual({
+      fetching: true,
+      data: { test: true },
+      error: undefined,
+      extensions: undefined,
+    });
+  });
 });

src/hooks/useQuery.ts

@@ -62,8 +62,8 @@ export const useQuery = <T = any, V = object>(
           ...opts,
         }),
         onEnd(() => setState(s => ({ ...s, fetching: false }))),
-        subscribe(({ data, error, extensions }) => {
-          setState({ fetching: false, data, error, extensions });
+        subscribe(({ fetching, data, error, extensions }) => {
+          setState({ fetching: fetching || false, data, error, extensions });
         })
       );
     },

src/types.ts

@@ -67,6 +67,8 @@ export interface OperationResult<Data = any> {
   error?: CombinedError;
   /** Optional extensions return by the Graphql server. */
   extensions?: Record<string, any>;
+  /** Optional flag to force fetching to remain true. */
+  fetching?: void | true;
 }
 
 /** Input parameters for to an Exchange factory function. */