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

Question

我正在使用 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)
  })
}

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

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

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

答案的关键是使用 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() block 中重用它:

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具体的逻辑(我不太确定)，但我希望这最终能帮助同样陷入类似情况的人!