Graphql-yoga: Custom Error Handling for Network Errors

[soheltarir]

Lets say I have a GraphQL schema defined has below,

input User {
     name: String!
     email: String!
}

type Mutation {
     createUser (payload: User!): Boolean
}

When I send a mutation createUser with input field/s missing, the server sends me a 400 Bad Request with some payload like below (as seen on browser Inspect logs),

{
  "errors": [
    {
      "message": "Field User.name of required type String! was not provided.",
      "locations": [
        {
          "line": 2,
          "column": 10
        }
      ]
    }
  ]
}

But Playground shows be the below error, and Apollo Client also receives this error.

{
  "error": "Response not successful: Received status code 400"
}

Is there a way to customise this error, maybe something like below,

{
    "errors": {
          "name": "ValidationError",
          "details": [
              "Field User.name of required type String! was not provided."
          ]
     }
}

[frandiox]

Same here when creating a custom scalar.

In the network tab I can see {"errors":[{"message":"Expected type ReferenceNumber!, found \"12345678\"; String's length must be at most 7, got 8","locations":[{"line":2,"column":69}]}]}.

In the playground I only see {"error": "Response not successful: Received status code 400"}.

[nagman]

Same here. How to display this payload in the server response body?

[nagman]

Any solution here?

[schickling]

Sorry for the slow response. @timsuchanek is looking into this!

[joshmadewell]

@timsuchanek @schickling it looks like this has something to do with this code? https://github.com/apollographql/apollo-link/blob/master/packages/apollo-link-http-common/src/index.ts#L145

[shobhitchittora]

@timsuchanek Is this been looked into. If not I can help closing this. Though would need some pointers about the code-base. Thanks!

[shobhitchittora]

For all who are facing this issue, I've just found the package you need. You can use apollo-link-error, for handling custom error for your frontend. It allows you to handle graphql as well as network errors.

Sample usage is as below -

import { onError } from "apollo-link-error"

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`)
})

const client = new ApolloClient({
  errorLink.concat(httpLink)
});

This will console log the network error and graphql errors when they occur.

[shobhitchittora]

@soheltarir If this answers you question please close this.

[stale[bot]]

Due to inactivity of this issue we have marked it stale. It will be closed if no further activity occurs.