Fix useMutation returning different execute functions for the same options

CHANGELOG.md

@@ -1,3 +1,6 @@
+## Apollo Client 3.5.2 (unreleased)
+- Fix useMutation execute function returning non-identical execution functions when passing similar options. <br/> [@brainkim](https://github.com/brainkim) in [#9093](https://github.com/apollographql/apollo-client/pull/9037)
+
 ## Apollo Client 3.5.1 (2021-11-09)
 
 - Remove npm from dependencies, and avoid referencing graphql-js enum value. <br/>

package.json

@@ -55,7 +55,7 @@
     {
       "name": "apollo-client",
       "path": "./dist/apollo-client.min.cjs",
-      "maxSize": "28.45 kB"
+      "maxSize": "28.5kB"
     }
   ],
   "engines": {

src/react/hooks/__tests__/useMutation.test.tsx

@@ -135,7 +135,7 @@ describe('useMutation Hook', () => {
       ];
 
       const { result, waitForNextUpdate } = renderHook(
-        () => useMutation(CREATE_TODO_MUTATION),
+        () => useMutation(CREATE_TODO_MUTATION, {}),
         { wrapper: ({ children }) => (
           <MockedProvider mocks={mocks}>
             {children}

src/react/hooks/useMutation.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useMemo, useEffect, useRef, useState } from 'react';
 import { DocumentNode } from 'graphql';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
@@ -40,87 +40,105 @@ export function useMutation<
     result,
     mutationId: 0,
     isMounted: true,
+    execute: null as null | MutationTuple<TData, TVariables, TContext, TCache>[0],
+    client,
+    mutation,
+    options,
   });
 
-  const execute = useCallback((
-    executeOptions: MutationFunctionOptions<
-      TData,
-      TVariables,
-      TContext,
-      TCache
-    > = {},
-  ) => {
-
-    const baseOptions = { ...options, mutation };
-    if (!ref.current.result.loading && !baseOptions.ignoreResults) {
-      setResult(ref.current.result = {
-        loading: true,
-        error: void 0,
-        data: void 0,
-        called: true,
-        client,
-      });
+  const execute = useMemo(() => {
+    if (
+      ref.current.execute != null &&
+      ref.current.client === client &&
+      equal(options, ref.current.options) &&
+      equal(mutation, ref.current.mutation)) {
+      return ref.current.execute;
     }
 
-    const mutationId = ++ref.current.mutationId;
-    const clientOptions = mergeOptions(
-      baseOptions,
-      executeOptions as any,
-    );
-
-    return client.mutate(clientOptions).then((response) =>{
-      const { data, errors } = response;
-      const error =
-        errors && errors.length > 0
-          ? new ApolloError({ graphQLErrors: errors })
-          : void 0;
-
-      if (
-        mutationId === ref.current.mutationId &&
-        !baseOptions.ignoreResults
-      ) {
-        const result = {
+    ref.current.client = client;
+    ref.current.options = options;
+    ref.current.mutation = mutation;
+    ref.current.execute = (
+      executeOptions: MutationFunctionOptions<
+        TData,
+        TVariables,
+        TContext,
+        TCache
+      > = {},
+    ) => {
+      const baseOptions = { ...options, mutation };
+      if (!ref.current.result.loading && !baseOptions.ignoreResults) {
+        setResult(ref.current.result = {
+          loading: true,
+          error: void 0,
+          data: void 0,
           called: true,
-          loading: false,
-          data,
-          error,
           client,
-        };
+        });
+      }
 
-        if (ref.current.isMounted && !equal(ref.current.result, result)) {
-          setResult(ref.current.result = result);
+      const mutationId = ++ref.current.mutationId;
+      const clientOptions = mergeOptions(
+        baseOptions,
+        executeOptions as any,
+      );
+
+      return client.mutate(clientOptions).then((response) =>{
+        const { data, errors } = response;
+        const error =
+          errors && errors.length > 0
+            ? new ApolloError({ graphQLErrors: errors })
+            : void 0;
+
+        if (
+          mutationId === ref.current.mutationId &&
+          !baseOptions.ignoreResults
+        ) {
+          const result = {
+            called: true,
+            loading: false,
+            data,
+            error,
+            client,
+          };
+
+          if (ref.current.isMounted && !equal(ref.current.result, result)) {
+            setResult(ref.current.result = result);
+          }
         }
-      }
 
-      baseOptions.onCompleted?.(response.data!);
-      return response;
-    }).catch((error) => {
-      if (
-        mutationId === ref.current.mutationId &&
-        ref.current.isMounted
-      ) {
-        const result = {
-          loading: false,
-          error,
-          data: void 0,
-          called: true,
-          client,
-        };
+        baseOptions.onCompleted?.(response.data!);
+        return response;
+      }).catch((error) => {
+        if (
+          mutationId === ref.current.mutationId &&
+          ref.current.isMounted
+        ) {
+          const result = {
+            loading: false,
+            error,
+            data: void 0,
+            called: true,
+            client,
+          };
+
+          if (!equal(ref.current.result, result)) {
+            setResult(ref.current.result = result);
+          }
+        }
 
-        if (!equal(ref.current.result, result)) {
-          setResult(ref.current.result = result);
+        if (baseOptions.onError) {
+          baseOptions.onError(error);
+          // TODO(brian): why are we returning this here???
+          return { data: void 0, errors: error };
         }
-      }
 
-      if (baseOptions.onError) {
-        baseOptions.onError(error);
-        // TODO(brian): why are we returning this here???
-        return { data: void 0, errors: error };
-      }
+        throw error;
+      });
+    };
 
-      throw error;
-    });
-  }, [client, options, mutation]);
+    return ref.current.execute;
+  }, [client, mutation, options]);
 
   const reset = useCallback(() => {
     setResult({ called: false, loading: false, client });