react-apollo 2.0: data.error prop is undefined after server returns an error

Created on 3 Nov 2017 · 5Comments · Source: apollographql/react-apollo

Intended outcome:
I've got a React component that uses logic like this when rendering:

    const { data } = this.props;

    if (data.loading) {
      return <LoadingIndicator />;
    }
    if (data.error) {
      return <div className="alert alert-danger">{data.error.message}</div>;
    }

    // render some stuff

I recently wrote an invalid GraphQL query against my schema (the server is a Rails app running graphql-ruby). It returned this error response with a HTTP 200 status:

{"errors":[{"message":"Field 'team_members' doesn't exist on type 'Event'","locations":[{"line":3,"column":5}],"fields":["query","event","team_members"]}]}

I expected to see the alert div containing this message.

Actual outcome:
I didn't see the alert div. Instead, the component attempted to render (and failed, naturally, since the data it expected wasn't present).

Looking at this with a JavaScript debugger, I saw a couple of interesting things:

When the component rendered after the request completed, data.error was undefined and data.loading was false. (This might be related to #1314, but it seems like a potentially different case because that issue doesn't mention a server-returned error.)
The breakpoint in the render method of my component was hit before the breakpoint I set in QueryManager.js, in fetchRequest (at https://github.com/apollographql/apollo-client/blob/master/packages/apollo-client/src/core/QueryManager.ts#L1070), which seems to be the place that checks for errors in the response and rejects the promise. The breakpoint in render was never hit again after that.

How to reproduce the issue:

https://nbudin.github.io/react-apollo-error-template/master/
https://github.com/nbudin/react-apollo-error-template

Version

Source