初始化后更新 ApolloClient 标头

Question

我的应用程序包含<Apollo />基本上初始化客户端的组件。

const client = new ApolloClient({
  link: new HttpLink({
    // ...
  }),
  cache: new InMemoryCache({
    // ..
  }),
});

再往后，用户可以采取某些行动，要求我为 apollo 客户端设置一些以前没有的新标头。我最初想为此使用 react 上下文来传递设置的新标头并在内部使用它们，<Apollo />但我不确定这是否是正确的方法。

查看文档后，似乎只能在初始化时设置 apollo 标头？

Answer 1

您通常希望使用apollo-link-context. 您可以将实际的标头值存储在内存、LocalStorage 或对您的应用程序有意义的任何内容中。然后在发送之前使用链接将它们注入到每个请求中：

const headerLink = setContext((request, previousContext) => ({
  headers: {
    // Make sure you include any existing headers!
    ...previousContext.headers,
    authorization: localStorage.getItem('authHeader')
  },
}));

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

setContext可以是异步的。您传递给它的函数应该返回一个带有您想要更改的任何上下文字段的对象，或者一个将解析为 1 的 Promise：

const headerLink = setContext(async (request, previousContext) => {
  const authorization = await someAsyncCall()
  return {
    headers: {
      ...previousContext.headers,
      authorization,
    },
  }
});

您可以查看文档以获取更多示例。