javascript - 创建客户端后(登录后)将上下文链接添加到 Apollo Link

Question

我想将上下文链接添加到现有客户的 Apollo Link 链中。

以下是我阅读过的两个 GitHub 问题:First , Second .

我不想使用本地存储来存储 token ，因为文档显示 here .

我有一个身份验证提供程序来存储我的 token 。存储我的 token 后，我想将上下文链接添加到 Apollo 客户端的链接

  const authLink = setContext((_, { headers }) => {
    const newHeaders = { ...headers };
    if (token) newHeaders.authorization = `Bearer ${token}`;

    return {
      headers: newHeaders,
    };
  });

我知道我可以通过 useClient 访问客户端. 如何在创建客户端之前将此链接附加到我的组件中已经存在的客户端而不这样做？
link: authLink.concat(httpLink)或 link: authLink.concat(whateverLinksApolloHas)

Answer 1

从 Apollo Client v3.0.0 开始，您现在可以使用 setLink 更新链接链。创建 Apollo 客户端后的方法 (see Changelog Section v3)。

Apollo Client now supports setting a new ApolloLink (or link chain) after new ApolloClient() has been called, using the ApolloClient#setLink method.@hwillson in #6193

但是，除此之外，我还没有找到任何关于它的文档。
我无法使用 setContext 添加上下文链接.相反，它看起来像是替换了整个链接链，所以这是我使用 @apollo/client@3.2.5 的解决方案.

import { ApolloClient, HttpLink, NormalizedCacheObject } from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';
import fetchNewToken from 'your-token-function-file'

const replaceLinkChainOnClient = (client: ApolloClient<NormalizedCacheObject>, url: string) => {
    const httpLink: HttpLink = new HttpLink({
        uri: url
    });

    const link = setContext(async (operation, prevContext) => {
        const token = await fetchNewToken();
        return {
            ...prevContext,
            headers: {
                ...prevContext.headers,
                Authorization: `Bearer ${token}`
            }
        };
    });
    client.setLink(link.concat(httpLink));
};