diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx
index 81f58cfb638..fb36a142ff5 100644
--- 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 }) => (
+
+ {children}
+
+ ),
+ }
+ );
+
+ 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
index 1762d11694b..524c1214e1e 100644
--- a/src/react/hooks/useLazyQuery.ts
+++ b/src/react/hooks/useLazyQuery.ts
@@ -26,7 +26,7 @@ export function useLazyQuery(
>((lazyOptions?: QueryLazyOptions) => {
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(
});
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(
};
}
}
-
- 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