为什么 react 组件中的 graphQLErrors 总是空的？答案

【问题标题】：Why graphQLErrors are always empty in react components?为什么 react 组件中的 graphQLErrors 总是空的？
【发布时间】：2019-08-04 11:40:36
【问题描述】：

我想向用户展示一些来自 graphql 服务器的错误。

有一些带有回调的组件使用一些突变

onSave() => {
    this.props.mutate({
        mutation: CHANGE_ORDER_MUTATION,
        variables: {
            ids,
        },
    }).catch((e) => {
        console.log(e.graphQLErrors) <--- e.graphQLErrors is always empty array = []
    })
}

虽然我可以通过apollo-link-error 链接看到graphQLErrors 错误。

const errorLink = onError(({ graphQLErrors, networkError }) => { console.log(graphQLErrors) <--- errors from server });

【问题讨论】：

标签： reactjs react-apollo apollo-client express-graphql

【解决方案1】：

迁移到apollo-server而不是express-graphql解决问题。

或者您可以通过e.networkError.result.errors访问错误

【讨论】：

在花了 3 个小时谷歌搜索如何从响应中访问 graphQLErrors 对象后，这个答案帮助了我。这应该在 Apollo 官方文档中。

【解决方案2】：

据我了解，如果您的服务器返回错误代码，“catch”将捕获错误，但如果它在响应中返回您的错误，但带有成功代码，则不会。在这种情况下，您只需要从响应中获取错误（保留您的捕获，以防服务器响应错误代码）：

this.props.mutate({
  mutation: CHANGE_ORDER_MUTATION,
    variables: {
      ids,
    },
  })
  .then((response) => {
    if (response.errors) {
      // do something with the errors
    } else {
      // there wasn't an error
    }
  })
  .catch((e) => {
    console.log(e.graphQLErrors) <--- e.graphQLErrors is always empty array = []
  })

或者 - 如果你使用 react-apollo 中的 graphql() 选项，你可以指定一个 onError 处理程序：

export default graphql(CHANGE_ORDER_MUTATION, {
  options: (props) => ({
    onCompleted: props.onCompleted,
    onError: props.onError
  }),
})(MyComponent);

参考：

【讨论】：

服务器返回状态 500。我也可以通过 error.networkError.result.errors 访问 graphQLErrors 错误
那么你找到了你要找的东西吗？