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

Question

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

例如，假设服务器：

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

在客户端应该如何处理？Apollo 目前因错误而失败，例如：

未处理（在 react-apollo 中）错误：GraphQL 错误：无法...

我想避免这种情况发生并处理这些错误。我如何使用 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'
  }
})