From 9e54f5dfa05fd363e534c432ba8c569bb96a6e35 Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <mail@lenzw.de>
Date: Wed, 1 Feb 2023 20:06:57 +0100
Subject: [PATCH] Allow `useLazyQuery` trigger fn to change `query` (#10499)

* Allow `useLazyQuery` trigger fn to change `query`
fixes #10496

* bump bundle size limit by a smidgen

* Update .changeset/seven-cameras-kiss.md

Co-authored-by: Jerel Miller <jerelmiller@gmail.com>

---------

Co-authored-by: Jerel Miller <jerelmiller@gmail.com>
---
 .changeset/seven-cameras-kiss.md              |  5 ++
 config/bundlesize.ts                          |  2 +-
 .../hooks/__tests__/useLazyQuery.test.tsx     | 71 +++++++++++++++++++
 src/react/hooks/useLazyQuery.ts               | 13 ++--
 src/utilities/common/mergeOptions.ts          |  2 +-
 5 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/seven-cameras-kiss.md

diff --git a/.changeset/seven-cameras-kiss.md b/.changeset/seven-cameras-kiss.md
new file mode 100644
index 00000000000..7cfdc4d353c
--- /dev/null
+++ b/.changeset/seven-cameras-kiss.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Allow the execution function returned by `useLazyQuery` to change the query.
diff --git a/config/bundlesize.ts b/config/bundlesize.ts
index 76f401d295e..9ec6d83d605 100644
--- a/config/bundlesize.ts
+++ b/config/bundlesize.ts
@@ -3,7 +3,7 @@ import { join } from "path";
 import { gzipSync } from "zlib";
 import bytes from "bytes";
 
-const gzipBundleByteLengthLimit = bytes("32.37KB");
+const gzipBundleByteLengthLimit = bytes("32.42KB");
 const minFile = join("dist", "apollo-client.min.cjs");
 const minPath = join(__dirname, "..", minFile);
 const gzipByteLen = gzipSync(readFileSync(minPath)).byteLength;
diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx
index 9f5f780e090..9be6b815ec0 100644
--- a/src/react/hooks/__tests__/useLazyQuery.test.tsx
+++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx
@@ -439,6 +439,77 @@ describe('useLazyQuery Hook', () => {
     });
   });
 
+
+  it("changing queries", async () => {
+    const query1 = gql`
+      query {
+        hello
+      }
+    `;
+    const query2 = gql`
+      query {
+        name
+      }
+    `;
+    const mocks = [
+      {
+        request: { query: query1 },
+        result: { data: { hello: "world" } },
+      },
+      {
+        request: { query: query2 },
+        result: { data: { name: "changed" } },
+      },
+    ];
+
+    const cache = new InMemoryCache();
+    const { result } = renderHook(() => useLazyQuery(query1), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
+      ),
+    });
+
+    expect(result.current[1].loading).toBe(false);
+    expect(result.current[1].data).toBe(undefined);
+    const execute = result.current[0];
+
+    setTimeout(() => execute());
+
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
+
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world" });
+
+    setTimeout(() => execute({ query: query2 }));
+
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
+
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ name: "changed" });
+  });
+
   it('should fetch data each time the execution function is called, when using a "network-only" fetch policy', async () => {
     const mocks = [
       {
diff --git a/src/react/hooks/useLazyQuery.ts b/src/react/hooks/useLazyQuery.ts
index 1493255d798..e0ffeab91dc 100644
--- a/src/react/hooks/useLazyQuery.ts
+++ b/src/react/hooks/useLazyQuery.ts
@@ -28,15 +28,14 @@ export function useLazyQuery<TData = any, TVariables extends OperationVariables
   options?: LazyQueryHookOptions<TData, TVariables>
 ): LazyQueryResultTuple<TData, TVariables> {
   const abortControllersRef = useRef(new Set<AbortController>());
-  const internalState = useInternalState(
-    useApolloClient(options && options.client),
-    query,
-  );
 
   const execOptionsRef = useRef<Partial<LazyQueryHookOptions<TData, TVariables>>>();
-  const merged = execOptionsRef.current
-    ? mergeOptions(options, execOptionsRef.current)
-    : options;
+  const merged = execOptionsRef.current ? mergeOptions(options, execOptionsRef.current) : options;
+
+  const internalState = useInternalState<TData, TVariables>(
+    useApolloClient(options && options.client),
+    merged?.query ?? query
+  );
 
   const useQueryResult = internalState.useQuery({
     ...merged,
diff --git a/src/utilities/common/mergeOptions.ts b/src/utilities/common/mergeOptions.ts
index 42cb3cb9451..1633a86df29 100644
--- a/src/utilities/common/mergeOptions.ts
+++ b/src/utilities/common/mergeOptions.ts
@@ -13,7 +13,7 @@ type OptionsUnion<TData, TVariables extends OperationVariables, TContext> =
   | MutationOptions<TData, TVariables, TContext>;
 
 export function mergeOptions<
-  TOptions extends OptionsUnion<any, any, any>
+  TOptions extends Partial<OptionsUnion<any, any, any>>
 >(
   defaults: TOptions | Partial<TOptions> | undefined,
   options: TOptions | Partial<TOptions>,