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

在 Apollo Client 3 中，apollo-link-context 已经被移除，取而代之的是 context 选项。要使用 Apollo Client 3 设置 Auth 头，你需要在创建 ApolloClient 实例时设置 context 选项。以下是一个示例：

import { ApolloClient, InMemoryCache, HttpLink, from } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

// 创建一个 HttpLink
const httpLink = new HttpLink({
  uri: 'https://your-api-url.com/graphql',
});

// 创建一个用于设置 Auth 头的 link
const authLink = setContext((_, { headers }) => {
  // 获取 token
  const token = localStorage.getItem('token');

  // 返回修改后的 headers
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  };
});

// 使用 from 组合 link
const link = from([authLink, httpLink]);

// 创建 ApolloClient 实例
const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

export default client;

在这个示例中，我们首先创建了一个 HttpLink，然后使用 setContext 创建了一个 authLink，它会在每个请求之前设置 Auth 头。最后，我们使用 from 将 authLink 和 httpLink 组合在一起，并将其传递给 ApolloClient 实例。

现在，每个发往 GraphQL 服务器的请求都会包含正确的 Auth 头。