如何在Apollo Client初始化阶段使用React端的全局状态数据

你遇到的是React生态下非组件上下文访问全局状态的典型场景，这里分通用方案和适配你当前Apollo Client的专属方案两种：

通用方案：内存全局变量 + Context状态同步 #

该方案满足你不持久化到本地存储、支持运行时动态更新、非组件可访问的所有要求：

1. 新建单独的全局状态存储文件src/globalState.ts，把需要共享的状态存在内存对象里：

// 仅存在运行时内存中，页面刷新后自动重置，无持久化安全风险
export const globalState = {
  personalToken: null as string | null
}

2. 修改你的PersonalTokenProvider，将Context状态和全局内存变量做同步：

import React, { useState, useEffect } from 'react';
import { globalState } from '../globalState';

interface ProviderProps {
  children: JSX.Element[] | JSX.Element;
}

export const PersonalTokenContext = React.createContext({});

export const PersonalTokenProvider: React.FC<ProviderProps> = (
  props: ProviderProps,
) => {
  const [token, setToken] = useState<string | null>(null);
  // 状态变更时同步更新全局内存变量
  useEffect(() => {
    globalState.personalToken = token;
  }, [token])

  const { children } = props;

  return (
    <PersonalTokenContext.Provider value={{ token, setToken }}>
      {children}
    </PersonalTokenContext.Provider>
  );
};

3. 任意非组件的普通函数里，直接导入globalState即可拿到最新状态：

import { globalState } from './globalState'

function anyOrdinaryFunction() {
  const latestToken = globalState.personalToken
  // 其余业务逻辑
}

适配你当前Apollo Client场景的专属优化方案 #

你不需要在初始化Apollo Client时就固定token，使用apollo-link-context可以实现每次请求时动态获取最新token，适配动态更新的场景：

1. 首先安装依赖（如未安装）：
   npm install apollo-link-context
2. 修改Apollo Client配置文件：

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { setContext } from 'apollo-link-context';
import { globalState } from '../globalState';

const httpLink = new HttpLink({
  uri: 'https://api.github.com/graphql',
});

// 每次请求触发前自动注入最新token
const authLink = setContext((_, { headers }) => {
  const token = globalState.personalToken;
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

export default client;

扩展说明 #

如果你后续使用Redux做状态管理，不需要额外维护全局变量，直接导出Redux的store实例，在非组件中调用store.getState()即可获取最新全局状态。

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