reactjs - 初始化后更新 ApolloClient header

Question

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

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

再往前走，用户可以执行某些操作，这些操作需要我为 apollo 客户端设置一些以前没有的新 header 。我最初想为此使用 react 上下文来传递设置的新 header 并在 <Apollo /> 中使用它们但我不确定这是否是正确的方法。

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

Answer 1

您通常希望使用 apollo-link-context，而不是将 header 直接传递给 Apollo 客户端实例。 .您可以将实际的 header 值存储在内存、LocalStorage 或对您的应用程序有意义的任何内容中。然后在发送之前使用链接将它们注入(inject)到每个请求中:

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,
    },
  }
});

您可以查看the docs有关其他示例。