Remove void from possible MutationTuple promise generic (#3334)

* Remove `void` from possible `MutationTuple` promise generic `void` is left over from pre-launch mutate function experiments, and is causing grief when attempting to destruture promise-returned data from the `useMutation` mutate function. Goodbye `void`! Fixes #3322. * Changelog update
apollographql · Aug 9, 2019 · 3187167 · 3187167
1 parent b78819d
commit 3187167
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 6 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -4,13 +4,15 @@
 
 ### Improvements
 
-- Documentation updates.  <br/>
+- Documentation updates. <br/>
   [@joshalling](https://github.com/joshalling) in [#3324](https://github.com/apollographql/react-apollo/pull/3324)
 
 ### Bug Fixes
 
 - Add missing `useLazyQuery` export to the `react-apollo` (all) package. <br/>
   [@hwillson](https://github.com/hwillson) in [#3320](https://github.com/apollographql/react-apollo/pull/3320)
+- Remove `void` from being one of the `MutationTuple` mutate function possible generics. This will make it easier to properly destructure results returned by the mutate function Promise. <br/>
+  [@hwillson](https://github.com/hwillson) in [#3334](https://github.com/apollographql/react-apollo/pull/3334)
 
 ## 3.0.0 (2019-08-06)
 
@@ -43,11 +45,11 @@ Consult the [Hooks migration guide](https://www.apollographql.com/docs/react/hoo
 - Various Typescript type changes. Since we've introduced a third way of managing data with React (Hooks), we had to rework many of the existing exported types to better align with the Hooks way of doing things. Base types are used to hold common properties across Hooks, Components and the `graphql` HOC, and these types are then extended when needed to provide properties that are specific to a certain React paradigm
   ([30edb1b0](https://github.com/apollographql/react-apollo/pull/2892/commits/30edb1b080b64253b9074a5e7347c544618ea2ea) and
   [3d138db3](https://github.com/apollographql/react-apollo/pull/2892/commits/3d138db386fe44e35203b991eb6caca0eec19d3d)).
-- `catchAsyncError`, `wrap`, and `compose` utilities have been removed 
-  ([2c3a262](https://github.com/apollographql/react-apollo/pull/2892/commits/2c3a262f9eb1cfb9e58b40ceaeda16a628e3964c), [7de864e](https://github.com/apollographql/react-apollo/pull/2892/commits/7de864ecb90521fc2e1f211023fe436486af2324), and [e6089a7](https://github.com/apollographql/react-apollo/pull/2892/commits/e6089a716b2b19b57f36200db378b8613a91612d)). 
-  
+- `catchAsyncError`, `wrap`, and `compose` utilities have been removed
+  ([2c3a262](https://github.com/apollographql/react-apollo/pull/2892/commits/2c3a262f9eb1cfb9e58b40ceaeda16a628e3964c), [7de864e](https://github.com/apollographql/react-apollo/pull/2892/commits/7de864ecb90521fc2e1f211023fe436486af2324), and [e6089a7](https://github.com/apollographql/react-apollo/pull/2892/commits/e6089a716b2b19b57f36200db378b8613a91612d)).
+
   Previously, `compose` was imported then exported directly from lodash using [`flowRight`](https://lodash.com/docs/4.17.15#flowRight). To keep using `compose`, install the [`lodash.flowright`](https://www.npmjs.com/package/lodash.flowright) package, then update your `compose` imports as:
-  
+
   ```js
   import * as compose from 'lodash.flowright';
   ```

diff --git a/packages/hooks/src/__tests__/useMutation.test.tsx b/packages/hooks/src/__tests__/useMutation.test.tsx
@@ -8,6 +8,12 @@ import { ApolloClient } from 'apollo-client';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 
 describe('useMutation Hook', () => {
+  interface Todo {
+    id: number;
+    description: string;
+    priority: string;
+  }
+
   const CREATE_TODO_MUTATION: DocumentNode = gql`
     mutation createTodo($description: String!) {
       createTodo(description: $description) {
@@ -187,6 +193,49 @@ describe('useMutation Hook', () => {
         </MockedProvider>
       );
     });
+
+    it('should resolve mutate function promise with mutation results', done => {
+      const variables = {
+        description: 'Get milk!'
+      };
+
+      const mocks = [
+        {
+          request: {
+            query: CREATE_TODO_MUTATION,
+            variables
+          },
+          result: { data: CREATE_TODO_RESULT }
+        }
+      ];
+
+      const Component = () => {
+        const [createTodo] = useMutation<{ createTodo: Todo }>(
+          CREATE_TODO_MUTATION
+        );
+
+        async function doIt() {
+          const { data } = await createTodo({ variables });
+          expect(data).toEqual(CREATE_TODO_RESULT);
+          expect(data!.createTodo.description).toEqual(
+            CREATE_TODO_RESULT.createTodo.description
+          );
+          done();
+        }
+
+        useEffect(() => {
+          doIt();
+        }, []);
+
+        return null;
+      };
+
+      render(
+        <MockedProvider mocks={mocks}>
+          <Component />
+        </MockedProvider>
+      );
+    });
   });
 
   describe('Optimistic response', () => {

diff --git a/packages/hooks/src/types.ts b/packages/hooks/src/types.ts
@@ -86,7 +86,7 @@ export interface MutationOptions<TData = any, TVariables = OperationVariables>
 export type MutationTuple<TData, TVariables> = [
   (
     options?: MutationFunctionOptions<TData, TVariables>
-  ) => Promise<void | ExecutionResult<TData>>,
+  ) => Promise<ExecutionResult<TData>>,
   MutationResult<TData>
 ];