Catch query error

[Jaszkowic]

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!

[Akryum]

Currently, I don't think there is a way. Maybe you should open an issue in apollo-client?

[bbugh]

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.

[valdoryu]

I look forward for this feature !

[Akryum]

It's already released! 😸

[itapingu]

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?

[ebisbe]

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

[Loschcode]

I'm facing the same problem, when the error is caught it's not the original error object but a different object which makes it impossible to manipulate. I need to be able to get the exact error response the server transmit

What I want to catch from the response:

What I get in catch(error)

The methods of the error object are ["stack", "graphQLErrors", "networkError", "message", "extraInfo"] which does not seem to include the data I get from the original network response.

[bbugh]

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
      }

[Loschcode]

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 😃

[YEMEAC]

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

[prem-prakash]

Have anyone found any workaround for this?

[prem-prakash]

apollographql/apollo-link#1022

[red-sight]

Try this

JSON.stringify(err.message)

[reinoldus]

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
            }
         ]
      }
   ]
}

[red-sight]

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".

[xillonz]

Just to comment on this incase further people face this issue as I did today. This was the solution I found that works:

apollographql/apollo-link#437 (comment)