fix useLazyQuery not refetching with the correct variables when execu…

…te is called multiple times Fixes #7396
apollographql · Aug 16, 2021 · 790d7f8 · 790d7f8
1 parent f664d87
commit 790d7f8
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 12 deletions.
diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx
@@ -212,10 +212,9 @@ describe('useLazyQuery Hook', () => {
     setTimeout(() => execute({ variables: { id: 2 } }));
 
     await waitForNextUpdate();
-
     expect(result.current[1].loading).toBe(true);
-    await waitForNextUpdate();
 
+    await waitForNextUpdate();
     expect(result.current[1].loading).toBe(false);
     expect(result.current[1].data).toEqual({ hello: 'world 2' });
   });
@@ -381,4 +380,82 @@ describe('useLazyQuery Hook', () => {
     result.current[1].stopPolling();
     await expect(waitForNextUpdate({ timeout: 20 })).rejects.toThrow('Timed out');
   });
+
+  it('should persist previous data when a query is re-run and variable changes', async () => {
+    const CAR_QUERY_BY_ID = gql`
+      query($id: Int) {
+        car(id: $id) {
+          make
+          model
+        }
+      }
+    `;
+
+    const data1 = {
+      car: {
+        make: 'Audi',
+        model: 'A4',
+        __typename: 'Car',
+      },
+    };
+
+    const data2 = {
+      car: {
+        make: 'Audi',
+        model: 'RS8',
+        __typename: 'Car',
+      },
+    };
+
+    const mocks = [
+      {
+        request: { query: CAR_QUERY_BY_ID, variables: { id: 1 } },
+        result: { data: data1 },
+        delay: 20,
+      },
+      {
+        request: { query: CAR_QUERY_BY_ID, variables: { id: 2 } },
+        result: { data: data2 },
+        delay: 20,
+      },
+    ];
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useLazyQuery(CAR_QUERY_BY_ID),
+      {
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>
+            {children}
+          </MockedProvider>
+        ),
+      }
+    );
+
+    expect(result.current[1].loading).toBe(false);
+    expect(result.current[1].data).toBe(undefined);
+    expect(result.current[1].previousData).toBe(undefined);
+    const execute = result.current[0];
+    setTimeout(() => execute({ variables: { id: 1 }}));
+
+    await waitForNextUpdate();
+    expect(result.current[1].loading).toBe(true);
+    expect(result.current[1].data).toBe(undefined);
+    expect(result.current[1].previousData).toBe(undefined);
+
+    await waitForNextUpdate();
+    expect(result.current[1].loading).toBe(false);
+    expect(result.current[1].data).toEqual(data1);
+    expect(result.current[1].previousData).toBe(undefined);
+
+    setTimeout(() => execute({ variables: { id: 2 }}));
+    await waitForNextUpdate();
+    expect(result.current[1].loading).toBe(true);
+    expect(result.current[1].data).toBe(undefined);
+    expect(result.current[1].previousData).toEqual(data1);
+
+    await waitForNextUpdate();
+    expect(result.current[1].loading).toBe(false);
+    expect(result.current[1].data).toEqual(data2);
+    expect(result.current[1].previousData).toEqual(data1);
+  });
 });
diff --git a/src/react/hooks/useLazyQuery.ts b/src/react/hooks/useLazyQuery.ts
@@ -26,7 +26,7 @@ export function useLazyQuery<TData = any, TVariables = OperationVariables>(
   >((lazyOptions?: QueryLazyOptions<TVariables>) => {
     setExecution((execution) => {
       if (execution.called) {
-        result && result.refetch(lazyOptions);
+        result && result.refetch(lazyOptions?.variables);
       }
 
       return { called: true, lazyOptions };
@@ -43,6 +43,15 @@ export function useLazyQuery<TData = any, TVariables = OperationVariables>(
   });
 
   if (!execution.called) {
+    result = {
+      ...result,
+      loading: false,
+      data: void 0 as unknown as TData,
+      error: void 0,
+      // TODO: fix the type of result
+      called: false as any,
+    };
+
     for (const key in result) {
       if (typeof (result as any)[key] === 'function') {
         const method = (result as any)[key];
@@ -52,15 +61,6 @@ export function useLazyQuery<TData = any, TVariables = OperationVariables>(
         };
       }
     }
-
-    result = {
-      ...result,
-      loading: false,
-      data: void 0 as unknown as TData,
-      error: void 0,
-      // TODO: fix the type of result
-      called: false as any,
-    };
   }
 
   // TODO: fix the type of result