如何从 graphql apollo 客户端查询中获取/记录/捕获错误

Posted 2023-03-10

【中文标题】如何从 graphql apollo 客户端查询中获取/记录/捕获错误

【英文标题】：How to get/log/capture the errors from a graphql apollo client query

【发布时间】：2021-11-18 09:05:19

【问题描述】：

我正在使用 @apollo/client 与 graphql 后端交互。

我发出的请求返回 400 错误请求，并且在网络选项卡中我可以看到错误的 json。

这是我想登录我的代码，但我无法登录。

        try 
            const response = await GraphQLClient.query(
                query: GET_PERSON,
                variables: 
                    personId: id,
                ,
                errorPolicy: "all",
            );
            console.log("response", response);
         catch (err) 
            console.log("err", err);
        

当我执行上述操作时，它会进入 catch 块，我无法访问错误对象。

err 错误：响应不成功：收到状态码 400 在新的 ApolloError (index.ts:54) 在 QueryManager.ts:1073 两者都 (asyncMap.ts:30) 在 asyncMap.ts:19 在新的承诺 () 在 Object.then (asyncMap.ts:19) 在 Object.error (asyncMap.ts:31) 在 notifySubscription (module.js:137) 在 onNotify (module.js:176) 在 SubscriptionObserver.error (module.js:229) 在迭代.ts:13 在 Array.forEach () 在 iterateObserversSafely (iteration.ts:13) 在 Object.error (Concast.ts:185) 在 notifySubscription (module.js:137) 在 onNotify (module.js:176) 在 SubscriptionObserver.error (module.js:229) 在 createHttpLink.ts:203

graphql服务

import  ApolloClient, InMemoryCache  from "@apollo/client";
import  Config  from "./../config";

const FRONTEND_API = `$Config.frontend_api/graphql` || "";

export const GraphQLClient = new ApolloClient(
    uri: FRONTEND_API,
    cache: new InMemoryCache(),

【问题讨论】：

你尝试过 console.log("err", err.message) 吗？另外，请分享您的 apollo 配置代码。

err.message 只是响应不成功：收到状态码 400 而不是 json 对象

@Ammar 请查看 apollo 客户端配置的更新问题

您似乎遇到了解析器错误，并且 Apollo 正在丢弃响应中的部分数据，这是默认行为。由于您使用的是 client.query 而不是 useQuery 挂钩，因此您需要使用 Apollo 链接在 Apollo 配置中处理这些错误。请在此处阅读如何使用 Apollo Link apollographql.com/docs/react/data/error-handling/…配置您的 apollo

@Ammar 嗯，如果你说的是正确的，我需要使用阿波罗链接来处理这个问题我很好奇为什么 ApolloQueryResult 甚至有错误和错误属性导出声明类型 ApolloQueryResult = 数据：T；错误？：ReadonlyArray;错误？：阿波罗错误；加载：布尔值；网络状态：网络状态；部分？：布尔值； ;

【参考方案1】：

在 catch 方法中以 json 响应的形式获取错误。

console.log(err.networkError.result.errors);

仍然非常不确定为什么响应对象具有 error 和 errors 属性，我不知道何时可以访问这些属性，也许其他人可以对此有所了解。

export declare type ApolloQueryResult<T> = 
    data: T;
    errors?: ReadonlyArray<GraphQLError>;
    error?: ApolloError;
    loading: boolean;
    networkStatus: NetworkStatus;
    partial?: boolean;
;