Nextjs & Apollo：在 getInitialProps 服务器端将 cookie 附加到 Apollo 客户端

【问题标题】：Nextjs & Apollo: Attach cookie to Apollo Client in getInitialProps server sideNextjs & Apollo：在 getInitialProps 服务器端将 cookie 附加到 Apollo 客户端
【发布时间】：2021-02-05 01:05:37
【问题描述】：

所以我知道我可以使用 ctx.req.headers.cookie 访问我的 cookie 服务器端，但我不确定如何使用 Apollo 客户端将该 cookie 发送到我的 GraphQL 端点。

有什么帮助吗？谢谢。

【问题讨论】：

您知道您希望发送给您的 cookie 的名称吗？为什么 Apollo 需要你的 cookie 来做什么？
我想将 cookie 发送到我的 graphql 服务器，该服务器使用我存储在仅 HTTP cookie 中的 JWT 对用户进行身份验证。它会在客户端发送时自动发送此cookie，而不是第一次在服务器中发送，所以我必须手动附加cookie。
太棒了。一个小的改进是不发送所有cookie，只发送服务器进行身份验证所需的cookie的key/value

标签： next.js apollo

【解决方案1】：

我可以建议的最简单的方法是使用Apollo HTTP Link's context (https://www.apollographql.com/docs/link/links/http/#passing-context-per-query)

如果您监控网站上常见的 HTTP 请求，您可能会注意到请求标头中设置了 cookie 标头，代表发送的 cookie。

因此，您可以通过在 Apollo HTTP 客户端的标头中设置相同的 cookie 来将 send cookies 设置为 Apollo

import {
  ApolloClient,
  InMemoryCache,
  gql,
  createHttpLink
} from "@apollo/client";


const client = new ApolloClient({
    link: createHttpLink({ uri: "https://myserver.com" })
    cache: new InMemoryCache()
  });

// Pass the cookie header into context when using ApolloClient
const cookie = 'mycookie1=myvalue1; mycookie2=myvalue2';
client.query({
      fetchPolicy: "cache-first",
      context: {
        headers: {
          cookie
        }
      },
      query: gql``
});

或使用低级 Apollo Link：https://www.apollographql.com/docs/react/api/link/apollo-link-context/#overview

【讨论】：