如何捕获并获取@apollo/client发起GraphQL查询时返回的错误信息

原因说明 #

你设置的errorPolicy: "all"仅作用于GraphQL业务层面的错误（即接口返回200状态码，但响应体带errors字段的场景），400属于HTTP协议层面的错误，Apollo默认会直接抛出到catch块，不会走errorPolicy的逻辑。你捕获到的是Apollo封装的ApolloError实例，详细错误信息就藏在该实例的属性里。

方案1：直接从捕获的错误中提取信息 #

修改catch块的打印逻辑，即可直接拿到完整错误内容：

try {
    const response = await GraphQLClient.query({
        query: GET_PERSON,
        variables: {
            personId: id,
        },
        errorPolicy: "all",
    });
    console.log("response", response);
} catch (err) {
    // 完整ApolloError对象
    console.log("完整错误对象", err);
    // GraphQL业务错误列表
    console.log("GraphQL错误", err.graphQLErrors);
    // 网络/HTTP错误详情
    console.log("网络错误", err.networkError);
    // 服务器返回的错误JSON就在networkError的result属性中
    if (err.networkError?.result) {
        console.log("服务端返回的完整错误内容", err.networkError.result);
    }
}

方案2：调整Apollo Client初始化配置，全局统一处理错误 #

你当前的Client初始化配置缺少错误处理链路，可以新增全局错误拦截逻辑，所有请求的错误都会先经过该拦截器：

import { ApolloClient, InMemoryCache, createHttpLink, from } from "@apollo/client";
import { onError } from "@apollo/client/link/error";
import { Config } from "./../config";

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

// 全局错误拦截链路
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.log(`GraphQL错误：${message}，请求路径：${path}，位置：${locations}`);
    });
  }
  if (networkError) {
    console.log(`网络错误：${networkError}`);
    if (networkError.result) {
      console.log("服务端错误详情", networkError.result);
    }
  }
});

const httpLink = createHttpLink({
  uri: FRONTEND_API,
});

export const GraphQLClient = new ApolloClient({
  // 把错误链路和HTTP链路组合起来
  link: from([errorLink, httpLink]),
  cache: new InMemoryCache(),
  // 全局配置默认错误策略，无需每次请求单独声明
  defaultOptions: {
    query: {
      errorPolicy: "all",
    },
  },
});

可选配置：让HTTP错误不进入catch块 #

如果你希望4xx/5xx类的HTTP错误也和GraphQL错误一样，存入response的errors字段，不抛出到catch块，可以自定义fetch逻辑覆盖默认行为：

const customFetch = (uri, options) => {
  return fetch(uri, options).then(response => {
    // 所有状态码的响应都正常返回，不抛出错误
    return response;
  });
};

const httpLink = createHttpLink({
  uri: FRONTEND_API,
  fetch: customFetch,
});

内容的提问来源于stack exchange，提问作者Kay