How to handle Apollo Graphql query error in Vue.JS?

Question

I am using Vue.js with Vue-Apollo and trying to fetch shared member list using query. I am using the graphQL service in backend.

I am using apollo 'error' function to handle GraphQL error. When the request is made with invalid input, I can see the errors in the network tab, I can see the JSON for the custom errors messages. But I can't console the errors in 'error' function.

Here is the apollo query that is used to fetch shared member list -

apollo: {
    sharedMembers: {
      query: gql`
        query item($uuid: ID) {
          item(uuid: $uuid) {
            ...itemTemplate
            members {
              ...member
              permission
            }
          }
        }
        ${ITEM_TEMPLATE}
        ${MEMBER}
      `,
      variables() {
        return {
          uuid: this.$route.params.uuid,
        }
      },
      update(data) {
        return data.item.members
      },
      error(error) {
       console.log('errors', error)
      }
    },
  },

The network response I got -

network_error

@DanielRearden, no nothing printed in console info. But getting this error. `Error: GraphQL error: Internal server error at new ApolloError (bundle.esm.js:63) at Object.next (bundle.esm.js:1003) at notifySubscription (Observable.js:130) at onNotify (Observable.js:165) at SubscriptionObserver.next (Observable.js:219) at bundle.esm.js:865 at Set.forEach () at Object.next (bundle.esm.js:865) at notifySubscription (Observable.js:130) at onNotify (Observable.js:165)` — khushbu patel, Jul 08 '19 at 08:29
@DanielRearden, I have also attached network response image above in question. — khushbu patel, Jul 08 '19 at 08:53

score 7 · Accepted Answer · edited Dec 08 '20 at 10:55

Using graphQLErrors

You could get the errors by looking in the error object for graphQLErrors:

error(error) {
  console.log('errors', error.graphQLErrors)
}

or

error({ graphQlErrors }) {
  console.log('errors', graphQLErrors)
}

Using apollo-error-link

You can use apollo-error-link to help solve your problem if the above doesn't work, docs here.

Here's an example from the docs and I added to it in the networkErrors section to show what you can do to edit the error message you see in your error block, or catch block if its a mutation.

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

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

  if (networkError) {
    // Add something like this to set the error message to the one from the server response
    networkError.message = networkError.result.errors[0].debugMessage

    console.log(`[Network error]: ${networkError}`)
  };
});

And then in your code:

error(error) {
  console.log('error-message', error.message)
}

The console should then log your debugMessage from the server.

score -1 · Answer 2 · answered Dec 12 '20 at 00:04

unfortunately i couldn't find out how i'd handle errors in such of graphql method call, but as an option you could provide onError method to ApolloClient constructor options. first argument is the error object. hopefully it may help. like so..

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000',
  onError(err) {
    console.log(err)
  },
})

How to handle Apollo Graphql query error in Vue.JS?

2 Answers2

Using graphQLErrors

Using apollo-error-link