创建Client后添加Context Link到Apollo Link（登录后）

Question

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

这是我读过的两个 GitHub 问题：First，Second。

我不希望使用本地存储来存储令牌的文档显示在这里。

我有一个存储我的令牌的身份验证提供程序。存储我的令牌后，我想将上下文链接添加到 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 Client 后使用其上的方法更新链接链（请参阅更改日志部分 v3）。

Apollo Client 现在支持在调用 new ApolloClient() 后使用 ApolloClient#setLink 方法设置新的 ApolloLink（或链接链）。@hwillson 在 #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));
};

Answer 2

我不相信有一种受支持的方式来完成您想要做的事情。您可以做的是初始化一个新实例ApolloClient并将其传递给ApolloProvider。例如：

const [token, setToken] = useState(null)
const client = getClient(token) // adds the appropriate links as necessary

return <ApolloProvider client={client}><App/></ApolloProvider>

如果您采用此路线并且需要在令牌更改时保留缓存，请确保InMemoryCache每次创建客户端时都使用相同的实例。

然而，即使这样也可能有些过分了。您没有理由不能始终使用setContext. 在修改标头之前，您已经检查了令牌是否存在。