Show Apollo mutation error to user in Vue.js?

Viewed 3298

I am using Vue.js with Vue-Apollo and initiating a User mutation to sign in a user. I am using the graph.cool service.

I have a request pipeline function setup to catch some errors, like an invalid email.

When the request is made with bad / invalid input, my error catch() fires (as expected) and in the network tab I can see the JSON for the custom errors messages. But how do I access these errors / response from within the catch if an error is triggered from graph.cool?

Example:

signin () {
  const email = this.email
  const password = this.password

  this.$apollo.mutate({
    mutation: signinMutation,
    variables: {
      email,
      password
    }
  })
  .then((data) => {
    // This never fires on an error, so I can't 
    // show the user the errors in the network repsonse.
    console.log(data) 
  })
  .catch((error) => {
    // Error in this part fires in the console 
    // but I'm unable to show the JSON response 
    // errors because the 'then()' above doesn't execute.
    console.error(error)
  })
}

I get the following error for an unrecognised user:

Error: GraphQL error: No user found with that information at new ApolloError (eval at (app.js:956), :34:28) at eval (eval at (app.js:1353), :139:33) at

Any idea how to show the errors in the response from within the catch()?

I can literally see the errors I want to show to the user in the response on the network tab here:

enter image description here

...but I can't figure out how to do it.

Any help much appreciated! Thank you.

2 Answers
Related