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

Question

所以我试图将授权 header 传递给 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.

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

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

Answer 1

我认为他们更新了包含 setContext 的文档:

    import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
    import { setContext } from '@apollo/client/link/context';
    
    const httpLink = createHttpLink({
      uri: '/graphql',
    });
    
    const authLink = setContext((_, { headers }) => {
      // get the authentication token from local storage if it exists
      const token = localStorage.getItem('token');
      // return the headers to the context so httpLink can read them
      return {
        headers: {
          ...headers,
          authorization: token ? `Bearer ${token}` : "",
        }
      }
    });
    
    const client = new ApolloClient({
      link: authLink.concat(httpLink),
      cache: new InMemoryCache()
    });

您不再需要单独安装@apollo/link-context，现在一切都与apollo 3.0 捆绑在一起。 【引用】:https://www.apollographql.com/docs/react/networking/authentication