Apollo GraphQL 本地和全局错误处理

Posted

技术标签:

【中文标题】Apollo GraphQL 本地和全局错误处理【英文标题】:Apollo GraphQL local and global error handling 【发布时间】:2019-07-31 23:40:11 【问题描述】:

我正在使用 Apollo 与一个用 React 编写的 Web 应用程序中的 GraphQL 服务器进行交互。我正在尝试在应用程序中实现错误处理并为此依赖apollo-link-error。

现在,我需要处理 2 类错误:

    可以在执行 Apollo 查询或突变的组件中本地处理的错误,即我需要在其上显示上下文错误信息的无效表单字段 可以全局处理的错误,例如通过在页面某处显示显示错误详细信息的 toast 通知

显然,一旦错误在本地处理,我需要它在全局范围内处理,因为在表单字段旁边显示错误消息没有多大意义和 来自 toast 消息的一般错误。

我在尝试实现这个时遇到的第一个绊脚石是全局错误处理逻辑触发本地错误处理逻辑之前,这使我无法在本地拦截错误然后找到一种防止全局逻辑启动的方法。

我创建了代码框示例,它以最简单的方式设置ApolloClient,使用http 和错误链接,并使用react-apollo Query 组件查询不存在的资源,产生错误。

我正在处理Query 组件的onError 回调(即本地错误处理)和apollo-link-error 处理程序(即全局错误处理)中的错误,并将错误打印到控制台.

它表明全局错误处理逻辑在本地错误处理之前启动。我需要它是相反的方式。

【问题讨论】:

【参考方案1】:

我已经发布了一个名为react-apollo-network-status 的库,它正好处理这个用例。让我知道它是否对你有用!

在本地处理某些错误的选择加入/退出行为是通过在操作上设置上下文变量来实现的,该变量可以在错误链接中读取。

【讨论】:

以上是关于Apollo GraphQL 本地和全局错误处理的主要内容,如果未能解决你的问题,请参考以下文章

GraphQL、react-apollo、Apollo 1,全局处理 200 HTTP 代码状态的 data.error 错误。不是网络一。

如何使用 React-Apollo 处理 GraphQL 错误?

使用 ApolloClient 和 Apollo-Server-Express 处理 GraphQL 错误

如何在我的 Vue Graphql 组件中使用错误并让其他错误在全局范围内处理?

使用 express-graphql 和 react-apollo 处理错误

react-apollo 没有连接到我的 graphql 本地服务器