One simple Apollo client debugging tip you’ll like

or How to deal with “Network error: Unexpected token” errors in Apollo client

Sometimes the Apollo client throws this error:

Network error: Unexpected token < in JSON at position 0

This happens because it tries to parse a string that it expects to be JSON but then encounters the less than character. This usually means HTML was returned instead of the expected JSON, which is the return format of GraphQL.

When this happens you don’t see the whole HTML message because it’s immediately cut off by this error. So, how do we see this error message?

We can use Afterwares.

‘Afterware’ is very similar to a middleware, except that a afterware runs after a request has been made,
that is when a response is going to get processed. It’s perfect for responding to the situation where a user becomes logged out during their session. (http://dev.apollodata.com/core/network.html)

Here, response is the HTTP response returned by the server. The actual response body is stored as a Blob in response._bodyBlob. So we can then convert this Blob to a string and see the actual response body.

It’ll look like this:

This will print the HTTP response body received by the Apollo client to the browser console.

If you liked this post, please click the little green 💚 ! Thanks!

Personal Pages: http://johnpaulada.github.io