From 52a9c8ea1ac08ee53fe1ddbd4ded899ea00a1f9f Mon Sep 17 00:00:00 2001
From: dciesielkiewicz <d.ciesielkiewicz@gmail.com>
Date: Mon, 20 Feb 2023 22:09:27 +0100
Subject: [PATCH] Fix: Support useMutation client param passed to execute
 function (#9438)

* Fix: Support useMutation client param passed to execute function

* Write tests for useMutation client passed as a param to execute function

* Update documentation to explicitly list `client` as an override option.

* Add changeset for #9438

---------

Co-authored-by: Jerel Miller <jerelmiller@gmail.com>
---
 .changeset/curly-countries-beg.md             |  5 +++
 docs/shared/mutation-result.mdx               |  1 +
 .../hooks/__tests__/useMutation.test.tsx      | 31 +++++++++++++++++++
 src/react/hooks/useMutation.ts                |  4 ++-
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/curly-countries-beg.md

diff --git a/.changeset/curly-countries-beg.md b/.changeset/curly-countries-beg.md
new file mode 100644
index 00000000000..a9e4ab17517
--- /dev/null
+++ b/.changeset/curly-countries-beg.md
@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+Ensure the `client` option passed to `useMutation`'s execute function is used when provided. Previously this option was ignored.
diff --git a/docs/shared/mutation-result.mdx b/docs/shared/mutation-result.mdx
index c70dbcda322..3feb6b1cc50 100644
--- a/docs/shared/mutation-result.mdx
+++ b/docs/shared/mutation-result.mdx
@@ -29,6 +29,7 @@ A function to trigger the mutation from your UI. You can optionally pass this fu
 * `refetchQueries`
 * `update`
 * `variables`
+* `client`
 
 Any option you pass here overrides any existing value for that option that you passed to `useMutation`.
 
diff --git a/src/react/hooks/__tests__/useMutation.test.tsx b/src/react/hooks/__tests__/useMutation.test.tsx
index 2f02d0c6869..e24641e97cb 100644
--- a/src/react/hooks/__tests__/useMutation.test.tsx
+++ b/src/react/hooks/__tests__/useMutation.test.tsx
@@ -496,6 +496,37 @@ describe('useMutation Hook', () => {
       expect(result.current[1].client).toBeInstanceOf(ApolloClient);
     });
 
+    it ('should call client passed to execute function', async () => {
+      const { result } = renderHook(
+        () => useMutation(CREATE_TODO_MUTATION),
+        { wrapper: ({ children }) => (
+          <MockedProvider>
+            {children}
+          </MockedProvider>
+        )},
+      );
+
+      const link = mockSingleLink();
+      const cache = new InMemoryCache();
+      const client = new ApolloClient({
+        cache,
+        link
+      });
+
+      const mutateSpy = jest.spyOn(client, 'mutate').mockImplementation(
+        () => new Promise((resolve) => {
+          resolve({ data: CREATE_TODO_RESULT })
+        })
+      );
+
+      const createTodo = result.current[0];
+      await act(async () => {
+        await createTodo({ client });
+      });
+
+      expect(mutateSpy).toHaveBeenCalledTimes(1);
+    });
+
     it('should merge provided variables', async () => {
       const CREATE_TODO_DATA = {
         createTodo: {
diff --git a/src/react/hooks/useMutation.ts b/src/react/hooks/useMutation.ts
index 4937c08ba6f..38b45c1e715 100644
--- a/src/react/hooks/useMutation.ts
+++ b/src/react/hooks/useMutation.ts
@@ -59,8 +59,10 @@ export function useMutation<
       TCache
     > = {}
   ) => {
-    const {client, options, mutation} = ref.current;
+    const {options, mutation} = ref.current;
     const baseOptions = { ...options, mutation };
+    const client = executeOptions.client || ref.current.client;
+
     if (!ref.current.result.loading && !baseOptions.ignoreResults && ref.current.isMounted) {
       setResult(ref.current.result = {
         loading: true,