react-apollo: An approach to handle errors globally

André König on October 02, 2017

Well, I had quite a journey today and I would like to share it with you. I'm – like most of you – a huge fan of GraphQL and the Apollo Stack. Tho... [Read Full]
markdown guide

And what about the 200 HTTP Status code errors like this one: Unhandled (in react-apollo) Error: GraphQL error: Not authorized for Query.myQuery at new ApolloError ?


You can handle those via the afterware as well. An alternative would be to use the error prop which will be passed to your component. Both will work :)


But you can't because it's a promise and you don't have yet data.errors.

Hm, can you explain your situation a little bit more? How does the response from your GraphQL look like? Is it stated as an error?

If I first use this code:

applyAfterware({ response }, next) {

I have this:

Response {type: "cors", url: "localhost:8080/api", redirected: false, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: true
headers: Headers
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "localhost:8080/api"
proto: Response

I can't read body.

So I found this:

and now I'm using:

const handleErrors = ({ response }, next) => {
// clone response so we can turn it into json independently
const res = response.clone()

And now I can use res.

But what I don't knowis why .clone()? Because response is a response?

After all I need to destroy res? How?


Interesting idea.

My approach was to display notifications for every error. I've released the core of this as a library:


For Apollo Client 2.0 this solution needs migration due to createNetworkInterface being obsolete as described at:

code of conduct - report abuse