Show Apollo mutation error to user in Vue.js?

So, it looks as though I was handling this the wrong way by barking up the wrong tree.

The key to the answer was examining the error from the .catch() with console.dir(error). This revealed some useful keys...namely:

error.graphQLErrors[0]

So all in all, the corrected code looks like this:

signin () {  const email = this.email  const password = this.password  this.$apollo.mutate({    mutation: signinMutation,    variables: {      email,      password    }  })  .then(data => {    console.log(data)  })  .catch(error => {    console.log(graphQLErrorMessages(error))  })}

The graphQLErrorMessages() function is a helper I wrote, so that I can reuse this in other .catch() blocks:

function graphQLErrorMessages (errorsFromCatch) {  const errors = errorsFromCatch.graphQLErrors[0]  const messages = []  if (errors.hasOwnProperty('functionError')) {    const customErrors = JSON.parse(errors.functionError)    messages.push(...customErrors.errors)  } else {    messages.push(errors.message)  }  return messages}

It returns an array of error messages (which is what I needed) but you could format this any way you like.

It might be a little https://graph.cool specific in its logic (I'm not so sure), but I hope this ends up helping someone also stuck in a similar situation!

I may be misunderstanding your question so please comment and correct me if I am but it looks like you may be having trouble with Promises more than with Vue or GraphQL.

Just like in a try...catch statement, once you catch an error, your program will continue to execute unless you re-throw the error. For example:

This Catches

try {   codeThatThrowsAnError();} catch(e) {  // Do Nothing}

This re-throws

try {   codeThatThrowsAnError();} catch(e) {  throw new Error("Err 135: I failed")}

Similarly, in Promise land, you can either catch the error and move like you have in your example, or you can re-throw. What you may be missing is that anything you return from a catch statement will be used in the next then. For example:

somethingReturningAFailedPromise()  .then(doWork)  .catch((err) => {    return "I'm a New Value"  })  .then(console.log)//=> "I'm a New Value"

It sounds to me like what you need is a data function that is more resilient to failure like the following:

const getUserProfile = (id) => {  return fetchUserData(id)    .catch((err) => {      logError(err);      return {};    })}