关于 reactjs:Apollo GraphQL 本地和全局错误处理

Apollo GraphQL local and global error handling

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

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

  • 可以在执行 Apollo 查询或变异的组件中本地处理的错误,即我需要在其上显示上下文错误信息的无效表单字段
  • 可以全局处理的错误,例如通过在页面某处显示显示错误详细信息的 toast 通知
  • 显然,一旦错误在本地处理,我就不需要在全局范围内处理它,因为在表单字段旁边显示错误消息并通过 toast 消息显示一般错误没有多大意义。

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

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

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

    console output

    它表明全局错误处理逻辑在本地错误处理之前启动。我需要它反过来。

    Edit apollo error handling


    我已经发布了一个名为 react-apollo-network-status 的库,它正好处理这个用例。如果对您有用,请告诉我!

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