Pass result of mutation to the graphql HOC wrapped component

Based on #3008.

Author: hwillson

packages/hoc/src/__tests__/mutations/index.test.tsx

@@ -49,9 +49,60 @@ describe('graphql(mutation)', () => {
   });
 
   it('binds a mutation to props', () => {
-    const ContainerWithData = graphql(query)(({ mutate }) => {
+    const ContainerWithData = graphql(query)(({ mutate, result }) => {
       expect(mutate).toBeTruthy();
+      expect(result).toBeTruthy();
       expect(typeof mutate).toBe('function');
+      expect(typeof result).toBe('object');
+      return null;
+    });
+
+    render(
+      <ApolloProvider client={client}>
+        <ContainerWithData />
+      </ApolloProvider>
+    );
+  });
+
+  it('binds a mutation result to props', () => {
+    type InjectedProps = {
+      result: any;
+    };
+
+    const ContainerWithData = graphql<{}, Data, Variables, InjectedProps>(
+      query
+    )(({ result }) => {
+      const { loading, error } = result;
+      expect(result).toBeTruthy();
+      expect(typeof loading).toBe('boolean');
+      expect(error).toBeFalsy();
+
+      return null;
+    });
+
+    render(
+      <ApolloProvider client={client}>
+        <ContainerWithData />
+      </ApolloProvider>
+    );
+  });
+
+  it('binds a mutation to props with a custom name', () => {
+    interface Props {}
+
+    type InjectedProps = {
+      customMutation: any;
+      customMutationResult: any;
+    };
+
+    const ContainerWithData = graphql<Props, Data, Variables, InjectedProps>(
+      query,
+      { name: 'customMutation' }
+    )(({ customMutation, customMutationResult }) => {
+      expect(customMutation).toBeTruthy();
+      expect(customMutationResult).toBeTruthy();
+      expect(typeof customMutation).toBe('function');
+      expect(typeof customMutationResult).toBe('object');
       return null;
     });
 

packages/hoc/src/mutation-hoc.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import { DocumentNode } from 'graphql';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { parser, BaseMutationOptions } from '@apollo/react-common';
+import {
+  parser,
+  BaseMutationOptions,
+  MutationFunction,
+  MutationResult
+} from '@apollo/react-common';
 import { Mutation } from '@apollo/react-components';
 
 import {
@@ -62,16 +67,31 @@ export function withMutation<
 
         return (
           <Mutation {...opts} mutation={document} ignoreResults>
-            {(mutate: any, _result: any) => {
+            {(
+              mutate: MutationFunction<TData, TGraphQLVariables>,
+              { data, ...r }: MutationResult<TData>
+            ) => {
+              // the HOC's historically hoisted the data from the execution result
+              // up onto the result since it was passed as a nested prop
+              // we massage the Mutation component's shape here to replicate that
+              // this matches the query HoC
+              const result = Object.assign(r, data || {});
               const name = operationOptions.name || 'mutate';
-              let childProps = { [name]: mutate };
+              const resultName = operationOptions.name
+                ? `${name}Result`
+                : 'result';
+              let childProps = {
+                [name]: mutate,
+                [resultName]: result
+              };
               if (operationOptions.props) {
                 const newResult: OptionProps<
                   TProps,
                   TData,
                   TGraphQLVariables
                 > = {
                   [name]: mutate,
+                  [resultName]: result,
                   ownProps: props
                 };
                 childProps = operationOptions.props(newResult) as any;

packages/hoc/src/types.ts

@@ -10,7 +10,8 @@ import {
   OperationVariables,
   MutationFunction,
   BaseQueryOptions,
-  BaseMutationOptions
+  BaseMutationOptions,
+  MutationResult
 } from '@apollo/react-common';
 
 export interface QueryControls<
@@ -50,6 +51,7 @@ export interface MutateProps<
   TGraphQLVariables = OperationVariables
 > {
   mutate: MutationFunction<TData, TGraphQLVariables>;
+  result: MutationResult<TData>;
 }
 
 export type ChildProps<