Apollo client: How to simply debug a 400 code error?

Question

I'm using Apollo-client and I don't understand why this is so hard to debug my error: I'm trying to perform a mutate call on my graphene python implementation of GraphQL. It end up with a 400 error code, and I have no way to retrieve the info.

For example: when I try my graphene service on the /graphQL interface, it return me helpful errors as bad input or bad methode name. Here, on apollo client, It only throw me a 400 code error. That doesn't help me at all. So is it possible to have the error info from graphene from my apolo client, instead of an unhelpful 400 code error?

Here an example, from my graphene interface (/graphQL):

mutation myMutation {
  uploadFile(input:"") {
    success
  }
}

will output:

{
  "errors": [
    {
      "message": "Argument \"input\" has invalid value \"\".\nExpected \"UploadFileMutationInput\", found not an object.",
      "locations": [
        {
          "column": 20,
          "line": 2
        }
      ]
    }
  ]
}

When I try the same on apollo client (js):

client.mutate({
  mutation: gql`
    mutation($file: Upload!) {
      uploadFile(input: $file) {
        success
      }
    }
  `,
  variables: { file } })
  .then(console.log)
  .catch((e) => { console.log("catch", e) })

I get Error: Network error: Response not successful: Received status code 400

My catch is never called, and the documentation is not helping me at all.

What I want is get the mutation detail errors of my calls: When I use improper method call or bad input type, I should not fall in a 400 without any information of what made my request bad.

Answer 1

You should use this link: https://www.npmjs.com/package/apollo-link-error when instantiating ApolloClient. It should go before other links, like so:

import { ApolloClient, ApolloLink } from 'apollo-boost'
import { onError } from 'apollo-link-error'

const errorLink = onError(({ graphQLErrors }) => {
  if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message))
})

new ApolloClient({
  ...
  link: ApolloLink.from([errorLink, authLink, restLink, httpLink]),
})