如何动态修改Apollo Client使用的端点URI 无需强制刷新页面

完全可以实现无刷新动态修改请求URI，给你两种可行方案：

方案1：在现有authMiddleware中直接覆盖URI（就是你提到的思路） #

Apollo的请求上下文支持直接设置uri字段，优先级高于HttpLink初始化时传入的固定地址，修改后的中间件代码如下：

const authMiddleware = new ApolloLink(
  (operation: Operation, forward: NextLink) => {
    operation.setContext((_: any) => {
      return {
        // 新增该行，每次请求拉取最新的端点地址
        uri: `${getTenantEndpoint()}/graphql`,
        headers: {
          ...operation.getContext().headers,
          Authorization: token && `Bearer ${token}`
        }
      };
    });

    return forward(operation);
  }
);

修改完成后，你更新localStorage里的租户端点配置后，下一次发起请求自动会使用新的URI，不需要刷新页面。

方案2：直接给HttpLink配置动态URI（更简洁，无需改中间件） #

HttpLink的uri参数本身支持传入函数，每次请求时会自动执行该函数生成最新地址，你直接修改初始化HttpLink的代码即可：

const httpLink = new HttpLink({
  // 把固定字符串改为函数，每次请求动态生成URI
  uri: () => `${getTenantEndpoint()}/graphql`,
  fetch
});

注意事项 #

你当前代码里create函数中定义的httpLinkConfig没有实际被使用，最终Apollo Client链路用的是外层提前初始化的httpLink，修改配置时记得同步调整外层的httpLink即可。

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