graphql(mutation) HOC result prop is not updated

[shamsup]

When using the graphql(mutation)(Component); pattern, the result prop injected into the component does not reflect the proper state of the mutation as it does when just using the Mutation component.
related source file: https://github.com/apollographql/react-apollo/blob/master/packages/hoc/src/mutation-hoc.tsx#L73

Intended outcome:
result prop injected from graphql wrapper includes proper loading and called state of mutate callback.

Actual outcome:
The result prop always shows { loading: false, called: false }

How to reproduce the issue:
client reproduction: https://codesandbox.io/s/apollo-reproduction-ozm2g
basic server: https://codesandbox.io/s/apollo-server-2il37

Basic Implementation:

import React, { useEffect, useState } from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

const App = props => {
  const { mutate, result } = props;
  const [isLoading, setIsLoading] = useState(false);
  
  console.log("isLoading state:", isLoading);
  console.log("mutate result:", { ...result });
  // 3x => "mutate result:", Object { called: false, loading: false, error: undefined, client: ApolloClient }
  
  useEffect(() => {
    setIsLoading(true);
    mutate({
      variables: {
        string: "test"
      }
    }).then(() => setIsLoading(false));
  }, [mutate]);
  return <div>Check console</div>;
};

const Mutation = gql`
  mutation updateHello($string: String!) {
    hello(string: $string)
  }
`;

export default graphql(Mutation)(App);

Version

  npmPackages:
    apollo-cache-inmemory: 1.5.1 => 1.5.1 
    apollo-client: ^2.6.3 => 2.6.3 
    apollo-link: 1.2.11 => 1.2.11 
    apollo-link-context: 1.0.17 => 1.0.17 
    apollo-link-http: 1.5.14 => 1.5.14 
    apollo-link-schema: ^1.2.3 => 1.2.3 
    react-apollo: ^2.5.8 => 2.5.8

[Ben-G]

We are seeing the same issue and it is a result of this line, which unfortunately sets ignoreResults to true for the underlying Mutation component:

https://github.com/apollographql/react-apollo/blob/master/packages/hoc/src/mutation-hoc.tsx#L69

Other tickets related to this have been closed, but I am not sure why, as the issue is not yet fixed (e.g. #2952).

A different fix was applied as part of PR #3008

However, because ignoreResults is still set to true we are not getting results back.

Is there any good reason ignoreResults is set by default?

[mxgit1090]

@Ben-G

Is there any good reason ignoreResults is set by default?

No, it may not return the results from Mutation function if ignoreResults is set.
We modified the withMutation.js in 'hoc/mutation-hoc.tsx' in our project.
As we remove prop ignoreResults in Mutation component, the result appears.

[mikefrancis]

Any updates on this issue?

[czabaj]

We are using recompose and until this resolves, we are using Mutation component and recompose/fromRenderProps

withMutation = (mutation, options) =>
  fromRenderProps(
    ({ children: propsMapper }) => <Mutation {...{ ...options, mutation }}>{propsMapper}</Mutation>,
    function propsMapper(mutate, result) {
      return { mutate, result };
    }
  );

Hope this will be solved soon.

[hwillson]

Hi all - we can't just remove ignoreResults as this will lead to a bunch of extra re-renders in certain cases (PR #3431 shows this in its test failures). Also, doing so is very much a breaking change. Something we can do though, is move ignoreResults around so that it can be overridden if desired. This way the original reproduction here can be fixed by using the following:

export default graphql(Mutation, { options: { ignoreResults: false } })(App);

I'll modify PR #3431 to add this in. Thanks!