在 Vue.js 中向用户显示 Apollo 变异错误？

Question

我正在使用 Vue.js with Vue-Apollo 并启动用户变更以登录用户。我正在使用 graph.cool 服务。

我有一个请求管道功能设置来捕获一些错误，例如无效的电子邮件。

当使用错误/无效输入发出请求时，我的错误 catch() 触发（如预期的那样）并且在网络选项卡中我可以看到自定义错误消息的 JSON。但是，如果从 graph.cool?

触发错误，我如何从捕获中访问这些错误/响应

示例：

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

对于无法识别的用户，我收到以下错误消息：

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

知道如何在 catch() 的响应中显示错误吗？

我可以从字面上看到我想在此处网络选项卡的响应中向用户显示的错误：

...但我不知道该怎么做。

非常感谢任何帮助！谢谢。

Answer 1

我可能误解了你的问题，所以请评论并纠正我，但看起来你在使用 Promises 时遇到的问题可能比 Vue 或 GraphQL 多。

就像在 try...catch 语句中一样，一旦发现错误，您的程序将继续执行，除非您重新抛出错误。例如：

这抓住了

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

这个重新抛出

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

类似地，在 Promise land 中，您可以像示例中那样捕获错误并移动，也可以重新抛出。您可能遗漏的是，您从 catch 语句 return 得到的任何内容都将在下一个 then 中使用。例如：

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

//=> "I'm a New Value"

在我看来，您需要的是一种对故障更具弹性的数据函数，如下所示：

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

Answer 2

所以，看起来我处理这个问题的方式是错误的，因为树叫错了。

答案的关键是用 console.dir(error) 检查 .catch() 的错误。这揭示了一些有用的键...即：

error.graphQLErrors[0]

总而言之，更正后的代码如下所示：

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

graphQLErrorMessages() 函数是我写的一个助手，所以我可以在其他 .catch() 块中重用它：

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
}

它 returns 一组错误消息（这是我需要的），但您可以按照自己喜欢的方式对其进行格式化。

它的逻辑可能有点https://graph.cool具体（我不太确定），但我希望这最终能帮助同样陷入类似情况的人！

在 Vue.js 中向用户显示 Apollo 变异错误？

Show Apollo mutation error to user in Vue.js?

javascript

vue.js

graphql

apollo

vue-apollo