Fix errorPolicy on useMutation hook (#5863)

* Add tests for errorPolicy on useMutation * Fix support for errorPolicy on useMutation * Changelog update Co-authored-by: Hugh Willson <[email protected]>
apollographql · Feb 27, 2020 · 379bbb0 · 379bbb0
1 parent 96e9eb0
commit 379bbb0
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -148,6 +148,9 @@
 - Make sure `@client @export` variables used in watched queries are updated each time the query receives new data that changes the value of the `@export` variable.  <br/>
   [@hwillson](https://github.com/hwillson) in [#5986](https://github.com/apollographql/apollo-client/pull/5986)
 
+- Ensure `useMutation` passes a defined `errorPolicy` option into its underlying `ApolloClient.mutate()` call.  <br/>
+  [@jamesreggio](https://github.com/jamesreggio) in [#5863](https://github.com/apollographql/apollo-client/pull/5863)
+
 ## Apollo Client 2.6.8
 
 ### Apollo Client (2.6.8)

diff --git a/src/react/data/MutationData.ts b/src/react/data/MutationData.ts
@@ -87,7 +87,8 @@ export class MutationData<
       update,
       context: mutationContext = {},
       awaitRefetchQueries = false,
-      fetchPolicy
+      fetchPolicy,
+      errorPolicy,
     } = this.getOptions();
     const mutateOptions = { ...mutationFunctionOptions };
 
@@ -107,6 +108,7 @@ export class MutationData<
       update,
       context: mutationContext,
       fetchPolicy,
+      errorPolicy,
       variables: mutateVariables,
       ...mutateOptions
     });

diff --git a/src/react/hooks/__tests__/useMutation.test.tsx b/src/react/hooks/__tests__/useMutation.test.tsx
@@ -1,4 +1,4 @@
-import { DocumentNode } from 'graphql';
+import { DocumentNode, GraphQLError } from 'graphql';
 import gql from 'graphql-tag';
 import { render, cleanup, wait } from '@testing-library/react';
 
@@ -39,6 +39,8 @@ describe('useMutation Hook', () => {
     }
   };
 
+  const CREATE_TODO_ERROR = 'Failed to create item';
+
   afterEach(cleanup);
 
   describe('General use', () => {
@@ -253,6 +255,110 @@ describe('useMutation Hook', () => {
       return wait();
     });
 
+    describe('mutate function upon error', () => {
+      it(`should reject when errorPolicy is 'none'`, async () => {
+        const variables = {
+          description: 'Get milk!'
+        };
+
+        const mocks = [
+          {
+            request: {
+              query: CREATE_TODO_MUTATION,
+              variables
+            },
+            result: {
+              data: CREATE_TODO_RESULT,
+              errors: [new GraphQLError(CREATE_TODO_ERROR)],
+            },
+          }
+        ];
+
+        const Component = () => {
+          const [createTodo] = useMutation<{ createTodo: Todo }>(
+            CREATE_TODO_MUTATION,
+            { errorPolicy: 'none' }
+          );
+
+          async function doIt() {
+            try {
+              await createTodo({ variables });
+            } catch (error) {
+              expect(error.message).toEqual(
+                expect.stringContaining(CREATE_TODO_ERROR)
+              );
+            }
+          }
+
+          useEffect(() => {
+            doIt();
+          }, []);
+
+          return null;
+        };
+
+        render(
+          <MockedProvider mocks={mocks}>
+            <Component />
+          </MockedProvider>
+        );
+
+        return wait();
+      });
+
+      it(`should resolve with 'data' and 'error' properties when errorPolicy is 'all'`, async () => {
+        const variables = {
+          description: 'Get milk!'
+        };
+
+        const mocks = [
+          {
+            request: {
+              query: CREATE_TODO_MUTATION,
+              variables
+            },
+            result: {
+              data: CREATE_TODO_RESULT,
+              errors: [new GraphQLError(CREATE_TODO_ERROR)],
+            },
+          }
+        ];
+
+        const Component = () => {
+          const [createTodo] = useMutation<{ createTodo: Todo }>(
+            CREATE_TODO_MUTATION,
+            { errorPolicy: 'all' }
+          );
+
+          async function doIt() {
+            const { data, errors } = await createTodo({ variables });
+
+            expect(data).toEqual(CREATE_TODO_RESULT);
+            expect(data!.createTodo.description).toEqual(
+              CREATE_TODO_RESULT.createTodo.description
+            );
+            expect(errors[0].message).toEqual(
+              expect.stringContaining(CREATE_TODO_ERROR)
+            );
+          }
+
+          useEffect(() => {
+            doIt();
+          }, []);
+
+          return null;
+        };
+
+        render(
+          <MockedProvider mocks={mocks}>
+            <Component />
+          </MockedProvider>
+        );
+
+        return wait();
+      })
+    });
+
     it('should return the current client instance in the result object', async () => {
       const Component = () => {
         const [, { client }] = useMutation(CREATE_TODO_MUTATION);