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 <[email protected]>

---------

Co-authored-by: Jerel Miller <[email protected]>

.changeset/seven-cameras-kiss.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Allow the execution function returned by `useLazyQuery` to change the query.

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;

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 = [
       {

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,

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>,