apollo: Catch query error

I am working with the node-advanced boilerplate (https://github.com/graphql-boilerplates/node-graphql-server/tree/master/advanced), currently I want to catch the error thrown server-side when I check if the user is logged in. Therefore I have the following query:

apollo: {
    feed: gql`{feed {title text id createdAt updatedAt isPublished}}`,
    loggedIn: {
        query: gql`{me{id}}`,
        update(data) {
            // We are authenticated (logged in) when we get some data 
            return true
        },
        error(error) {
            // Catch the error when we are not authenticated
            this.authenticateResult = error.message
        }
    }
}

The error(error){...} function is called, which is good. So I am able to know that there was an error. Right now the error(error){...} function is called after the error appears in the console. However, I want to catch this error so that it is not thrown in the console. Is there a way to do this?

With mutations I can succesfully catch the error:

this.$apollo.mutate({
    mutation: LOGIN_MUTATION,
    variables: {
        email: this.email,
        password: this.password
    }
}).then(data => {
    // localStorage.setItem('GC_AUTH_TOKEN',data.login.token)
    // this.token = localStorage.getItem('GC_AUTH_TOKEN')
    this.authenticateResult = data
    this.authenticated = true
}).catch(error => {
    this.authenticated = false
    this.authenticateResult = error.message
})

Is there a way to really catch the errors when performing a query, not a mutation?

Thanks in advance!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 16 (4 by maintainers)

Most upvoted comments

Hello, maybe I’m missing something but how can i fix this? I’ve this code

this.$apollo.query({
          query: someQuery, 
          fetchPolicy:'network-only'
        })
        .then(({data}) => { 
          // Query work fine and result is the proper data object
          console.log(result);
        })
        .catch((error) => {
          // This should log the error object but is just printing out the message
          console.log(error);
        });

I’m still getting back the printed out message instead of the error object that contains the data that i need to analyze… any help please?

+14

itapingu on Feb 27, 2019

I think this issue should be reopened. On queries, even if we have an error handler, the console still gets the error printed. I don’t believe this is an apollo-client problem.

Looking at the vue-apollo code in smart-apollo.js, it appears to be manually outputting the error with console.error: https://github.com/Akryum/vue-apollo/blob/66504309599ce9d4a31feb8fd5f065d790349c86/src/smart-apollo.js#L138-L156

The library is correctly catching the error and passing it to the callback, but it’s also pushing the error to the console.

I think we should have an option (or the default) to suppress errors if this.options.error set and handled. If I’m handling the error, I don’t want it also pushed to the client’s console.

bbugh on May 14, 2018

FYI for anyone else that runs into this, your error handler has to return a truthy value if you want to stop the error propagation.

See line 163 and 165 here:

https://github.com/Akryum/vue-apollo/blob/d88e6ace17dba94f84b3111d41894da5e19a240e/src/smart-apollo.js#L160-L169

Example:

    errorHandler (error) {
      if (isNotFound(error)) {
        router.history.updateRoute(router.match('/not_found'))
        return true // we handled the error, stop propagation
      }

bbugh on Apr 3, 2019

Hey @Akryum , you say that “it’s already released” but as @itapingu I’m still seeing printed out messages. What has been released?

ebisbe on Mar 19, 2019

If anyone reads this issue and is using graphql-ruby with vue-apollo, you shouldn’t raise errors through Ruby because as mentioned above you need truthy value / not a crash. You should rather use GraphQL::ExecutionError.new('My error') which can be easily serialized afterwards:

try {
  // will go wrong
} catch(error) {
  const serialized = error.graphQLErrors.map(error => error.message).join(', ')
}

Hope it helps 😃

Loschcode on Apr 25, 2019

I am facing the same issue. I just can’t figure out a way how to access the “errors” array:

{
   "errors":[
      {
         "message":"Variable \"$thingId\" of required type \"Int!\" was not provided.",
         "locations":[
            {
               "line":1,
               "column":11
            }
         ]
      }
   ]
}

Errors array located in response error js object. You may find it in “Error.response”.

red-sight on Apr 8, 2020

i have the last version with the “fix” but error still shows as “Error: GraphQL error: Unable to to be identified …” not a proper json

YEMEAC on Jul 27, 2019