Prevent unhandled rejection for promise returned from mutate function (#12892)

Author: jerelmiller

.changeset/odd-frogs-chew.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Prevent unhandled rejections from the promise returned by calling the `mutate` function from the `useMutation` hook.

.size-limits.json

@@ -1,6 +1,6 @@
 {
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 43867,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38749,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33600,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27651
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 43807,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38705,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33582,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27649
 }

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

@@ -30,7 +30,7 @@ import { Defer20220824Handler } from "@apollo/client/incremental";
 import { BatchHttpLink } from "@apollo/client/link/batch-http";
 import { ApolloProvider, useMutation, useQuery } from "@apollo/client/react";
 import { MockLink, MockSubscriptionLink } from "@apollo/client/testing";
-import { spyOnConsole } from "@apollo/client/testing/internal";
+import { spyOnConsole, wait } from "@apollo/client/testing/internal";
 import { MockedProvider } from "@apollo/client/testing/react";
 import type { DeepPartial } from "@apollo/client/utilities";
 import { invariant } from "@apollo/client/utilities/invariant";
@@ -513,6 +513,47 @@ describe("useMutation Hook", () => {
       await expect(takeSnapshot).not.toRerender();
     });
 
+    it("does not cause unhandled rejections", async () => {
+      const variables = {
+        description: "Get milk!",
+      };
+
+      const mocks = [
+        {
+          request: {
+            query: CREATE_TODO_MUTATION,
+            variables,
+          },
+          result: {
+            errors: [{ message: CREATE_TODO_ERROR }],
+          },
+          delay: 10,
+        },
+      ];
+
+      using _disabledAct = disableActEnvironment();
+      const { takeSnapshot, getCurrentSnapshot } =
+        await renderHookToSnapshotStream(
+          () => useMutation(CREATE_TODO_MUTATION, { variables }),
+          {
+            wrapper: ({ children }) => (
+              <MockedProvider mocks={mocks}>{children}</MockedProvider>
+            ),
+          }
+        );
+
+      await takeSnapshot();
+
+      const [createTodo] = getCurrentSnapshot();
+
+      // Intentionally don't await this to ensure we don't get unhandled rejections
+      createTodo();
+      await wait(15);
+
+      // No assertions needed. This test fails if the promise throws an
+      // unhandled rection
+    });
+
     it(`should reject when errorPolicy is 'none'`, async () => {
       const variables = {
         description: "Get milk!",

src/react/hooks/useMutation.ts

@@ -21,7 +21,10 @@ import type {
 } from "@apollo/client";
 import type { IgnoreModifier } from "@apollo/client/cache";
 import type { NoInfer, Prettify } from "@apollo/client/utilities/internal";
-import { mergeOptions } from "@apollo/client/utilities/internal";
+import {
+  mergeOptions,
+  preventUnhandledRejection,
+} from "@apollo/client/utilities/internal";
 
 import { useIsomorphicLayoutEffect } from "./internal/useIsomorphicLayoutEffect.js";
 import { useApolloClient } from "./useApolloClient.js";
@@ -284,72 +287,80 @@ export function useMutation<
       const mutationId = ++ref.current.mutationId;
       const clientOptions = mergeOptions(baseOptions, executeOptions as any);
 
-      return client
-        .mutate(
-          clientOptions as ApolloClient.MutateOptions<TData, OperationVariables>
-        )
-        .then(
-          (response) => {
-            const { data, error } = response;
+      return preventUnhandledRejection(
+        client
+          .mutate(
+            clientOptions as ApolloClient.MutateOptions<
+              TData,
+              OperationVariables
+            >
+          )
+          .then(
+            (response) => {
+              const { data, error } = response;
+
+              const onError =
+                executeOptions.onError || ref.current.options?.onError;
+
+              if (error && onError) {
+                onError(error, clientOptions);
+              }
 
-            const onError =
-              executeOptions.onError || ref.current.options?.onError;
+              if (mutationId === ref.current.mutationId) {
+                const result = {
+                  called: true,
+                  loading: false,
+                  data,
+                  error,
+                  client,
+                };
+
+                if (
+                  ref.current.isMounted &&
+                  !equal(ref.current.result, result)
+                ) {
+                  setResult((ref.current.result = result));
+                }
+              }
 
-            if (error && onError) {
-              onError(error, clientOptions);
-            }
+              const onCompleted =
+                executeOptions.onCompleted || ref.current.options?.onCompleted;
 
-            if (mutationId === ref.current.mutationId) {
-              const result = {
-                called: true,
-                loading: false,
-                data,
-                error,
-                client,
-              };
-
-              if (ref.current.isMounted && !equal(ref.current.result, result)) {
-                setResult((ref.current.result = result));
+              if (!error) {
+                onCompleted?.(response.data!, clientOptions);
               }
-            }
 
-            const onCompleted =
-              executeOptions.onCompleted || ref.current.options?.onCompleted;
+              return response;
+            },
+            (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 (!error) {
-              onCompleted?.(response.data!, clientOptions);
-            }
+              const onError =
+                executeOptions.onError || ref.current.options?.onError;
 
-            return response;
-          },
-          (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 (onError) {
+                onError(error, clientOptions);
               }
-            }
-
-            const onError =
-              executeOptions.onError || ref.current.options?.onError;
 
-            if (onError) {
-              onError(error, clientOptions);
+              throw error;
             }
-
-            throw error;
-          }
-        );
+          )
+      );
     },
     []
   );