Apollo Subscription时机问题：登录后需立即获取Token而非刷新

嘿，这个问题我之前也碰到过！核心原因是你现在的SubscriptionClient初始化时，connectionParams是直接从localStorage读取的静态值——登录后localStorage里的token更新了，但已经创建好的wsClient不会自动同步这个变化，只有刷新页面重新初始化客户端时才会读取新token。下面给你几个可行的解决思路：

思路1：让connectionParams动态获取最新Token #

把connectionParams从静态对象改成一个函数，这样每次建立（或重连）WebSocket连接时，都会重新去localStorage读取最新的token，不用依赖页面刷新。

修改后的客户端初始化代码：

const wsClient = new SubscriptionClient(SUB_ENDPOINT, {
  reconnect: true,
  timeout: 30000,
  // 改成函数，每次连接时动态取token
  connectionParams: () => ({
    token: JSON.parse(localStorage.getItem('token')) || null
  })
});

登录成功后，你只需要触发一次WebSocket重连（比如调用wsClient.reconnect()），就能让客户端用新token建立连接了。

思路2：登录成功后手动更新Token并重连 #

如果不想修改初始化逻辑，也可以在登录流程完成后，手动更新wsClient的connectionParams并触发重连，直接让客户端使用新token：

// 假设这是你的登录成功回调函数
const handleLoginSuccess = (newToken) => {
  // 先把新token存到localStorage
  localStorage.setItem('token', JSON.stringify(newToken));
  // 更新wsClient的连接参数
  wsClient.options.connectionParams = { token: newToken };
  // 触发重连，用新token建立连接
  wsClient.reconnect();
};

这个方法更直接，适合需要精确控制连接时机的场景。

思路3：结合状态管理工具（可选） #

如果你项目里用了React Context、Redux这类状态管理工具，可以把token存在全局状态里，然后让connectionParams从状态中读取。登录后状态更新时，同样调用wsClient.reconnect()来触发新的连接，这样能避免直接操作localStorage，让状态管理更统一。

比如用React Context的话，大致逻辑是：

// 在Context中获取最新token
const { token } = useAuthContext();

// 初始化wsClient时从Context取token（注意要在组件内初始化，或监听状态变化）
const wsClient = useMemo(() => new SubscriptionClient(SUB_ENDPOINT, {
  reconnect: true,
  timeout: 30000,
  connectionParams: { token }
}), [token]);

// 当token变化时，wsClient会重新创建，自动用新token连接

这些方法都能解决你现在“必须刷新页面才能获取token”的问题，根据你的项目架构选一个最适合的就行！

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