Apollo Client中四Link协同使用问题：errorLink未触发求可行示例

问题核心：Apollo Link 的 from 数组遵循请求顺次传递、响应/错误逆序传递的规则。你的 errorLink 放在数组末尾，错误返回时会直接跳过它，无法触发。

正确实现步骤 #

1. 调整链路顺序：将 errorLink 放在 from 数组的最前端，确保错误返回时优先经过它处理。
2. 确保 errorLink 符合 Apollo Link 规范，使用官方提供的 onError 方法构建。

完整代码示例 #

1. 导入依赖 #

import { ApolloClient, InMemoryCache, from } from '@apollo/client';
import { onError } from '@apollo/client/link/error';
// 导入已有的 authLink、refreshTokenLink、httpLink

2. 实现 ErrorLink #

const errorLink = onError(({ graphQLErrors, networkError }) => {
  // 处理 GraphQL 业务错误
  if (graphQLErrors) {
    graphQLErrors.forEach(err => {
      console.error(`GraphQL Error: ${err.message}`, err);
      // 可根据错误码做对应处理，比如权限错误跳转登录
      if (err.extensions?.code === 'UNAUTHENTICATED') {
        window.location.href = '/login';
      }
    });
  }

  // 处理网络层面错误（如请求超时、404、500）
  if (networkError) {
    console.error(`Network Error: ${networkError.message}`, networkError);
  }
});

3. 配置 Apollo Client #

const client = new ApolloClient({
  cache: new InMemoryCache({ possibleTypes }),
  link: from([
    errorLink,    // 错误链路前置
    authLink,
    refreshTokenLink,
    httpLink      // 请求发送链路放在最后
  ]),
});

额外说明 #

如果你的 refreshTokenLink 是用于处理 token 过期并重试请求的，需确保其内部逻辑正确传递错误：比如重试失败后，要将错误继续向前传递给 errorLink，而非自行吞噬。

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