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

【问题标题】：Apollo Client (React): Handling unexpected errorsApollo Client (React)：处理意外错误
【发布时间】：2017-09-24 14:23:52
【问题描述】：

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

例如，假设服务器：

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

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

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

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

供参考：

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

【问题讨论】：

标签： javascript reactjs apollo react-apollo apollo-client

【解决方案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 字段，则会打印该消息。

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

【讨论】：

apollo 服务器发送的错误怎么样：proxyConsole.js:54 错误：GraphQL 错误：[object Object] at new ApolloError (ApolloError.js:34) at QueryManager.js:129 at

【解决方案2】：

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

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

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

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

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

【讨论】：