Apollo返回401错误后如何阻止后续查询请求？

你遇到的问题其实很典型：onError Link是在请求返回错误后才触发的，这时候第二个查询可能已经发出去了，所以它没法拦截还没发送的请求。要解决这个问题，我们需要从「请求发送前拦截」或者「组件层面控制查询触发时机」入手，下面给你两个实用的方案：

方案一：组件层面手动控制查询触发（适合特定组件的两个查询） #

如果这两个查询只在当前组件里需要按顺序执行，最直接的方式是用useLazyQuery延迟第二个查询的触发，只有第一个查询成功且没有401错误时，再手动发起第二个请求。

示例代码：

import { useQuery, useLazyQuery, useEffect } from '@apollo/client';
import { FIRST_QUERY, SECOND_QUERY } from './your-queries';

function YourComponent() {
  // 第一个查询自动触发
  const { data: firstData, error: firstError } = useQuery(FIRST_QUERY);
  // 第二个查询用useLazyQuery，不会自动触发
  const [fetchSecondQuery, { data: secondData }] = useLazyQuery(SECOND_QUERY);

  // 监听第一个查询的结果，决定是否触发第二个
  useEffect(() => {
    // 只有第一个查询成功、没有错误时才发第二个请求
    if (firstData && !firstError) {
      fetchSecondQuery();
    }
  }, [firstData, firstError, fetchSecondQuery]);

  // 处理401错误
  if (firstError?.networkError?.statusCode === 401) {
    // 这里可以加登录跳转、提示等逻辑
    return <div>登录已过期，请重新登录</div>;
  }

  return (
    <div>
      {/* 渲染你的数据 */}
      {firstData && <p>第一个查询结果：{JSON.stringify(firstData)}</p>}
      {secondData && <p>第二个查询结果：{JSON.stringify(secondData)}</p>}
    </div>
  );
}

这种方式的好处是逻辑清晰，完全在组件内控制，不会影响其他组件的请求。

方案二：全局自定义Link拦截请求（适合全应用的401拦截） #

如果你希望全局范围内，只要出现一次401就阻止所有后续请求，可以自定义一个Apollo Link，在请求发送前检查是否已经触发了未授权状态，从而拦截请求。

示例代码：

import { ApolloLink, from, Observable } from '@apollo/client';
import { HttpLink } from '@apollo/client/link/http';
import { InMemoryCache } from '@apollo/client/cache';

// 全局维护未授权状态
let isUnauthorized = false;

// 自定义拦截Link
const authBlockLink = new ApolloLink((operation, forward) => {
  // 如果已经标记为未授权，直接取消请求
  if (isUnauthorized) {
    return new Observable((observer) => {
      observer.error(new Error('已拦截：用户未授权'));
    });
  }

  // 正常转发请求，同时监听响应
  return forward(operation).map((response) => {
    // 检查响应中是否有401错误
    const has401 = response.errors?.some(
      err => err.extensions?.statusCode === 401
    );

    if (has401) {
      isUnauthorized = true;
      // 这里可以添加登录跳转、清除token等逻辑
      window.location.href = '/login';
    }

    return response;
  });
});

// 构建Apollo Client
const client = new ApolloClient({
  link: from([
    authBlockLink,
    new HttpLink({ uri: '/your-graphql-endpoint' }),
    // 其他Link（比如errorLink、authLink等）放在合适的位置
  ]),
  cache: new InMemoryCache(),
});

注意：当用户重新登录后，记得把isUnauthorized重置为false，否则后续请求会一直被拦截。比如在登录成功的回调里加isUnauthorized = false。

为什么原来的onError Link没用？ #

再补充一下：onError Link是在请求完成并返回错误后才执行的，而你的两个查询是同时触发的，第二个请求可能在第一个请求的错误回调执行前就已经发送出去了，所以它没法阻止已经发出的请求。我们需要的是「前置拦截」，而不是「后置处理」。

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