为什么 graphQLErrors 在反应组件中总是空的？

Question

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

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

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

虽然我能够看到 graphQLErrors 错误 apollo-link-error link。

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

Answer 1

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

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

Answer 2

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

或者您可以通过 e.networkError.result.errors

访问错误

为什么 graphQLErrors 在反应组件中总是空的？

Why graphQLErrors are always empty in react components?

reactjs

react-apollo

apollo-client

express-graphql