Apollo GraphQL 本地和全局错误处理

Sim*_*one 5 error-handling apollo reactjs graphql react-apollo

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

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

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

显然,一旦错误被本地处理我需要它不会在全球范围内处理,因为它并没有多大意义,显示错误消息旁边的一个表单字段通过举杯消息一般错误。

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

我创建了 Codesandbox 示例,它ApolloClient以最简单的方式设置一个,使用 http 和错误链接,并使用该react-apollo Query组件对不存在的资源进行查询,从而产生错误。

onErrorQuery组件的回调(因此是本地错误处理)和apollo-link-error处理程序(因此是全局错误处理)中处理错误,并将错误打印到控制台。

控制台输出

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

编辑阿波罗错误处理

ama*_*ann 1

我发布了一个名为react-apollo-network-status 的库,它可以准确处理这个用例。让我知道它是否对您有用!

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