Vue-apollo: Best way to discover and handle GraphQL errors during a network request?

[danthareja]

Hi there! Thank you for your great work on this project, I have a quick question about the best way to discover GraphQL errors during a network request. Here's the scenario -

If I have the following GraphQL schema:

type Query {
  manifest(pickDate: String!): Manifest
}

And I send a request with an invalid query:

apollo: {
  manifest: {
    query: gql`
      query GetManifest($pickDate: String) { // Improper type for pickDate (should be String!)
        manifest(pickDate: $pickDate) {
          id
        }
      }
    `,
    variables: {
      pickDate: '2017-11-03'
    },
    error(error) {
      console.log(error)
    },
  }
},

I'll get the following error logged from the error callback:

The failure of the request is due to the query defining the wrong type for pickDate, using String instead of the expected type String!.

I know this, because if I use apollo-link-error

import { onError } from 'apollo-link-error';
const errorLink = onError(({ operation, response, 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}`);
});

I get the networkError and the graphQLErrors

Question: Is there any way to discover specific GraphQL errors inside of the error callback? If not, are there any other ways you suggest to be notified of GraphQL errors from within a component? Could I tie the output of apollo-link-error into Vue somehow?

I've also tried to set errorPolicy to all as mentioned in the docs, but didn't get any changes

Any advice would be a huge help, thank you!

[Akryum]

Use console.log({ error }) to print the full object to the console (by default the browser outputs only the error message and stack trace). You can then see all the properties of the error object:

[danthareja]

Awesome!! This is exactly what I was looking for, thank you!

[Pau1fitz]

@Akryum This is great to inspect to inspect the error, but I am unsure how can I use this to check the statusCode?

error.networkError.statusCode doesn't work. Any ideas?

[muliuyun]

error ({ graphQLErrors, networkError }) {
if(networkError.statusCode == 401) {
this.$router.push({ path: "/login" });
}
this.$message(graphQLErrors.message)
}

this work for me