在 Vue.js 中向用户显示 Apollo 突变错误？答案

【问题标题】：Show Apollo mutation error to user in Vue.js?在 Vue.js 中向用户显示 Apollo 突变错误？
【发布时间】：2017-12-25 05:48:14
【问题描述】：

我正在使用 Vue.js 和 Vue-Apollo 并启动用户突变来登录用户。我正在使用 graph.cool 服务。

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

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

示例：

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

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

错误：GraphQL 错误：找不到具有该信息的用户在新的 ApolloError (eval at (app.js:956), :34:28) 在评估（评估在（app.js:1353），：139:33）在

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

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

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

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

【问题讨论】：

我想你可以在.catch之后再添加一个.then：stackoverflow.com/questions/35999072/…
虽然这是真的，但我无法在实际响应本身中获取“数据”。 :(

标签： javascript vue.js graphql apollo vue-apollo

【解决方案1】：

所以，看来我是用错误的方式处理这个问题，找错树了。

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

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
}

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

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

【讨论】：

Graphcool 特定部分是属性functionError，只有当您想要返回错误时才会返回in a Graphcool Function。此外，如果catch 处于活动状态，则不能保证graphQLErrors 有一个项目。所以你应该先检查graphQLErrors.length > 0.
这太疯狂了，官方文档甚至根本没有提到这个 graphql 错误字段！我花了太长时间才找到这个

【解决方案2】：

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

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

这抓住了

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

这会重新抛出

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

类似地，在 Promise 领域，您可以像示例中那样捕捉错误并移动，也可以重新抛出。您可能缺少的是，您从 catch 语句返回的任何内容都将在下一个 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 {};
    })
}

【讨论】：