时间戳

首页 > 解决方案 > 无法使用 Apollo Client 3 和 setContext (apollo-link-context) 设置 Auth Headers

reactjs - 无法使用 Apollo Client 3 和 setContext (apollo-link-context) 设置 Auth Headers

问题描述

所以我试图将授权标头传递给 Apollo Client 3 以访问数据库。在当前文档中推荐的方法是创建一个 HttpLink 对象

const httpLink = new HttpLink({
  uri: "************************",
  fetch
});

然后使用 setContext 方法（我认为来自'http-link-context'）：

const authLink = setContext((_, { headers, ...context }) => {
  const token = localStorage.getItem("userToken");
  return {
    headers: {
      ...headers,
      ...(token
        ? { Authorization: `Bearer ${token}` }
        : `Bearer *************************`)
    },
    ...context
  };
});

然后将对象嫁接在一起并将它们作为“链接”对象传递给新的 ApolloClient ：

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

不幸的是，当我这样做时，我收到一条错误消息

Uncaught (in promise) Error: GraphQL error: Missing authorization header.

当我检查我的请求标头时，我看不到授权标头。

有没有其他人能够成功启动并运行它？

标签： reactjsgraphqlapolloapollo-client

解决方案

非常烦人的是，他们在 Apollo 的文档中给出的示例没有显示 setContext 的导入，因此在使用最新版本的 Apollo 时，不应从“http-link-context”导入所需的包，而是从“@apollo/link-context”导入（或阿波罗 3 号，无论如何）。使用当前包它工作正常。

推荐阅读