为啥 react 组件中的 graphQLErrors 总是空的？

Posted 2023-03-10

【中文标题】为啥 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 );

【参考方案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);

参考：

https://github.com/apollographql/react-apollo/issues/1828 Apollo client mutation error handling

【讨论】：

服务器返回状态 500。我也可以通过 error.networkError.result.errors 访问 graphQLErrors 错误

那么你找到了你要找的东西吗？