如何绕过Apollo onError()处理GraphQL Mutation错误？服务端抛出403 Forbidden后客户端无法捕获问题求助

这问题我之前也踩过坑！核心原因是Apollo Client对Mutation和Query的GraphQL错误默认处理策略不同，再加上你服务端返回的是「HTTP 200状态但带GraphQL errors数组」的403权限错误，导致组件内的自定义错误逻辑没触发，只走了全局onError。

为什么会这样？ #

Apollo Client把错误分成两类：

1. Network Errors：比如HTTP 4xx/5xx（直接返回非200状态码），这类错误默认会触发组件内的error状态、onError回调和try/catch。
2. GraphQL Errors：HTTP状态码是200，但响应体里带errors数组（像你贴的返回结果），这类错误的默认处理逻辑在Query和Mutation上不一样：
   • useQuery：默认会把GraphQL Errors合并到组件的error状态里（所以你能捕获到）
   • useMutation：默认只会把Network Errors抛给组件内逻辑，GraphQL Errors只会触发全局onError，不会更新组件的error状态，也不会进入try/catch或组件内的onError回调。

解决方案：设置errorPolicy #

只需要给useMutation配置errorPolicy: 'all'，就能让GraphQL Errors也被组件内的错误处理逻辑捕获。

方式1：全局配置（所有Mutation生效） #

在创建Apollo Client实例时设置默认选项：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: '/your-graphql-endpoint',
  cache: new InMemoryCache(),
  defaultOptions: {
    mutate: {
      errorPolicy: 'all'
    }
  }
});

方式2：单个Mutation配置（仅当前Mutation生效） #

直接在useMutation里指定：

const [m, { error }] = useMutation(MY_MUTATION, {
  errorPolicy: 'all', // 关键配置
  onError: (e: ApolloError) => {
    console.error('Error return #2 - 组件内onError回调', e);
  }
});

// 检查组件内的error状态
if (error) {
  console.error('Error return #1 - 组件error状态', error);
}

// 调用Mutation的逻辑
try {
  const result = await m({ variables });
  // 当errorPolicy为'all'时，result里也会包含errors数组
  if (result.errors) {
    console.error('Error return #3 - result中的errors', result.errors);
  }
} catch (e) {
  console.error('Error return #4 - try/catch捕获', e);
}

关于errorPolicy的三个选项说明 #

• none（默认）：仅Network Errors会触发组件内错误逻辑，GraphQL Errors只存在于result.errors中，不会抛出。
• all：同时把Network Errors和GraphQL Errors合并到组件的error状态，触发onError回调，try/catch也能捕获，result.errors也会保留。
• ignore：完全忽略GraphQL Errors，不会更新error状态，也不会触发任何错误回调。

这样配置后，你的403权限错误就能被组件内的自定义逻辑捕获，而不是只走全局onError了。

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