Apollo Client (React): Handling unexpected errors Apollo Client (React): Handling unexpected errors reactjs reactjs

Apollo Client (React): Handling unexpected errors


Errors are passed along in the error field on your component props: http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error

function MyComponent({ data }) {  if (data.error) {    return <div>Error!</div>;  } else {    // ...  }}export default graphql(gql`query { ... }`)(MyComponent);

That message is printed if we detect that there was an error and the error field was not accessed in the component.

You could write a higher-order component to handle errors in a generic way, so that you can wrap all of your components with that.


A server error might mean that there's no data object coming from the server so there's also no error message available.

Let's say you query some user data so that the result object would be data.user. Then you want to test:

if (data.loading !== true && data.user === undefined) {   /* handle the error here */}

If you don't want to see the error messages, you can add options to your query:

graphql(query, {  options: {    errorPolicy: 'ignore'  }})