如何使用 GQL 从 React 前端的 Apollo 客户端获取错误

Posted

技术标签:

【中文标题】如何使用 GQL 从 React 前端的 Apollo 客户端获取错误【英文标题】:How can i get errors out of Apollo client in a React front end using GQL 【发布时间】:2021-08-03 20:58:43 【问题描述】:

我有一个使用 Apollo/GQL 的 react 应用程序,通过 redux sagas 调用 GQL 查询/突变

我正在使用以下方法实例化 apolloClient:

import ApolloClient from "apollo-client";

//.....

const apolloClient = new ApolloClient(
    link: httpLink,
    cache: new InMemoryCache(),
    queryDeduplication: false,
    );

我需要

    访问 apollo 中的错误数组 运行一些操作,以便我可以使用错误,现在让 jsut 说我需要将错误打印到控制台。

文档有点缺乏(甚至 apollo 文档也提到了许多关于如何执行此操作以及他们需要添加信息的查询)

他们的大部分遍历显示查询是从组件调用的,而不是通过 redux 存储和 async/saga 复杂性。

我如何从 apollo 访问错误数组以及如何回调它并运行带有错误的操作(但是,Hooks 等)?

我需要能够在客户端执行此操作

【问题讨论】:

我相信这里的官方文档可能对您使用 Apollo Link 的 onError 有用:apollographql.com/docs/react/api/link/apollo-link-error 【参考方案1】:
const errorControl =  onError(( networkError, graphQLErrors ) => 
  if (graphQLErrors) 
    graphQLErrors.map(( message, locations, path ) => 
      toast.error("There was an error accessing the database, please try again later");
    );
  
  if (networkError) 
    toast.error("There was a network error, please try again later");
  
);

来自一个未经授权的堆栈溢出帖子。

然后在新的 ApolloClient 的实例化中连接你的链接

link: errorControl.concat(httpLink)

【讨论】:

以上是关于如何使用 GQL 从 React 前端的 Apollo 客户端获取错误的主要内容,如果未能解决你的问题,请参考以下文章

如何以与@nuxt/apollo subscribeToMore 一起使用的方式设置我的 nuxt

如何使用带有 react-apollo 的模拟数据进行测试

如何在 apollo 的 graphql-gql 中使用从 npm 包导入的自定义 graphQL 类型

react-apollo gql, TypeError: Object(...) is not a function

如何使用 React 前端从 Mongoose 显示带有 <img> 的图像

@Nuxt/Apollo 如何从 gql 查询中删除“__typeName”