Fix: Support useMutation client param passed to execute function (apo…

…llographql#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 apollographql#9438

---------

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

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

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`.
 

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: {

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,