Apollo Client (React)：处理意外错误

Question

我一直在查看 Apollo 文档，但没有看到有关如何在 Apollo 客户端中处理服务器错误的信息。

例如，假设服务器：

超时
变得无法访问
意外失败

这在客户端应该如何处理？ Apollo 当前失败并出现如下错误：

Unhandled (in react-apollo) Error: GraphQL error: Cannot ...

我想避免这种情况发生并处理这些错误。我如何使用 React Apollo 做到这一点？

供参考：

我目前正在使用 React-Apollo 和 Redux。

Answer 1

错误在组件道具的 error 字段中传递：http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error

function MyComponent({ data }) {
  if (data.error) {
    return <div>Error!</div>;
  } else {
    // ...
  }
}

export default graphql(gql`query { ... }`)(MyComponent);

如果我们检测到有错误并且未在组件中访问 error 字段，则会打印该消息。

您可以编写高阶组件以通用方式处理错误，这样您就可以用它包装所有组件。

Answer 2

服务器错误 可能意味着没有来自服务器的数据对象，因此也没有可用的错误消息。

假设您查询一些用户数据，结果对象将是 data.user。那么你要测试：

if (data.loading !== true && data.user === undefined) {
   /* handle the error here */
}

如果您不想看到错误消息，可以在查询中添加选项：

graphql(query, {
  options: {
    errorPolicy: 'ignore'
  }
})

Apollo Client (React)：处理意外错误

Apollo Client (React): Handling unexpected errors

javascript

apollo

reactjs

react-apollo

apollo-client