Apollo-client: Add onCompleted and onError props to the Query component

[dispix]

This is a feature request regarding the Query component. The current implementation do not offer the onCompleted and onError props like the Mutation component does. With the new usage (function as a children), it is sometimes difficult to migrate component from the old API to the new one. For example, you can no longer do something like this if you place the Query in your component:

class MyComponent extends React.Component {
  myMethodName = () => {
    // doing something with this.props.data is not possible anymore since it does not come from the props
  }

  render() {
    return <Query>...</Query>
  }
}

Another advantage to implementing those methods would be a more homogenous API between the Query and Mutation components.

Any thoughts on this proposition ?

[hwillson]

PR https://github.com/apollographql/react-apollo/pull/1922 addresses this and has been merged (changes will be coming in the next react-apollo release, currently scheduled for June 3, 2018). Thanks!

[elessarperm]

Shouldn't onComplete have been executed if query result is in cache?
If my query result is in cache already Query doesn't execute onComplete.
However, it works when I change fetchPolicy to cache-and-network or network-only.

[mrdulin]

same issue.

I want to reset react component state in onCompleted callback, but it does not execute.

onCommentSumit(evt) {
    evt.preventDefault();
    const {
      nativeEvent: { target }
    } = evt;

    const $comment = target.elements.comment;
    const text = $comment.value.trim();

    this.props.addComment({
      variables: { comment: { bookId: this.props.match.params.id, text } },
      onCompleted: () => {
        // Not executed
        debugger;
        this.setState({comment: ''})
      }
    });
  }

I am not sure is it a right place to reset my component state after sending a mutation

Here is docs: https://www.apollographql.com/docs/react/essentials/mutations.html#props