Adds mutation result to mutation hoc

Author: andycarrell

src/mutation-hoc.tsx

@@ -56,12 +56,19 @@ export function withMutation<
 
         return (
           <Mutation {...opts} mutation={document} ignoreResults>
-            {(mutate, _result) => {
+            {(mutate, { data, ...r }) => {
+              // 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;
@@ -70,7 +77,7 @@ export function withMutation<
               return (
                 <WrappedComponent
                   {...props as TProps}
-                  {...childProps as any}
+                  {...childProps as TChildProps}
                 />
               );
             }}

src/types.ts

@@ -10,7 +10,7 @@ import ApolloClient, {
   PureQueryOptions,
   MutationUpdaterFn,
 } from 'apollo-client';
-import { MutationFn } from './Mutation';
+import { MutationFn, MutationResult } from './Mutation';
 
 export interface Context {
   [key: string]: any;
@@ -94,6 +94,7 @@ export interface DataProps<TData, TGraphQLVariables = OperationVariables> {
 // export to allow usage individually for simple components
 export interface MutateProps<TData = any, TGraphQLVariables = OperationVariables> {
   mutate: MutationFn<TData, TGraphQLVariables>;
+  result: MutationResult<TData>
 }
 
 export type ChildProps<TProps = {}, TData = {}, TGraphQLVariables = OperationVariables> = TProps &

test/client/graphql/mutations/index.test.tsx

@@ -45,9 +45,55 @@ 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;
+    });
+
+    renderer.create(
+      <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;
+    });
+
+    renderer.create(
+      <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;
     });