ApolloClient初始化后如何动态更新请求头？

嘿，别担心，Apollo Client完全支持在运行时动态添加新请求头，根本不需要只能在初始化的时候设置！你的React Context思路有道理，但还有更贴合Apollo设计的方案，我给你详细拆解下：

首先，打破误解：请求头绝非只能初始化时设置 #

Apollo的Link系统就是专门用来处理这类动态请求修改的，官方推荐用setContext这个工具来实现动态请求头，比直接改Client实例靠谱多了。

方案1：用setContext + 状态管理（最推荐） #

setContext是Apollo Link提供的一个拦截器，它可以在每次请求发送前动态修改请求上下文，包括请求头。你可以把动态的请求头存在React Context、Redux或者Zustand这类状态管理工具里，然后在setContext里读取并合并到请求头中。

举个具体的例子：

1. 先创建一个用来存动态请求头的状态（比如用React Context）：

import { createContext, useContext, useState, useEffect, useRef } from 'react';
import { ApolloClient, InMemoryCache, HttpLink, setContext } from '@apollo/client';

// 创建Context存储动态请求头
const DynamicHeadersContext = createContext({});

// 封装一个Provider组件，用来管理动态头的状态
export const DynamicHeadersProvider = ({ children }) => {
  const [dynamicHeaders, setDynamicHeaders] = useState({});
  const headersRef = useRef(dynamicHeaders);

  // 把最新的头信息同步到ref里，方便在setContext里读取
  useEffect(() => {
    headersRef.current = dynamicHeaders;
  }, [dynamicHeaders]);

  return (
    <DynamicHeadersContext.Provider value={{ dynamicHeaders, setDynamicHeaders }}>
      {children}
    </DynamicHeadersContext.Provider>
  );
};

// 自定义hook用来获取更新头的方法
export const useDynamicHeaders = () => useContext(DynamicHeadersContext);

2. 然后创建Apollo Client时，用setContext读取ref里的动态头：

// 创建拦截link，动态添加请求头
const dynamicHeaderLink = setContext((_, { headers }) => {
  // 从ref里拿到最新的动态头
  const dynamicHeaders = headersRef.current;
  return {
    headers: {
      ...headers, // 保留原来的请求头
      ...dynamicHeaders, // 合并新的动态头
    },
  };
});

const httpLink = new HttpLink({ uri: '/your-graphql-endpoint' });

// 合并两个link
const client = new ApolloClient({
  link: dynamicHeaderLink.concat(httpLink),
  cache: new InMemoryCache(),
});

3. 最后在你的业务组件里，就可以轻松更新请求头了：

import { useDynamicHeaders } from './path-to-your-provider';

const SomeActionComponent = () => {
  const { setDynamicHeaders } = useDynamicHeaders();

  const handleAddHeader = () => {
    // 添加新的请求头，比如用户操作后需要加的认证头或者自定义头
    setDynamicHeaders({ 'X-Custom-Header': 'new-value', 'X-Another-Header': 'another-value' });
  };

  return <button onClick={handleAddHeader}>添加新请求头</button>;
};

方案2：你的React Context思路的优化 #

你原本想把新请求头通过Context传递给<Apollo />组件，但直接在组件里修改Client实例是不可行的（因为ApolloClient设计成不可变的，修改后不会自动生效）。但结合上面的setContext方案，就可以完美实现你的思路——用Context存动态头，再用拦截器读取，这其实就是方案1的核心逻辑。

关键提醒 #

千万别尝试直接修改ApolloClient实例的link或者headers，这种做法不符合Apollo的设计，很容易导致请求不生效或者状态不一致的问题。用Link拦截器是官方认可的标准做法，既灵活又安全。

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