Apollo 中 NextJs s-s-r 和 cookie 的问题

Posted 2023-03-10

【中文标题】Apollo 中 NextJs s-s-r 和 cookie 的问题

【英文标题】：Issues with NextJs s-s-r and cookies in Apollo

【发布时间】：2020-08-20 23:28:57

【问题描述】：

我想在我的 nextjs 应用程序中使用 cookie 进行身份验证。我的代码中有一个错误，s-s-r 无法工作，因为在代码执行过程中的某个地方，它在页面的第一次渲染中找不到 cookie，因此它会引发错误。我现在已经使用了很多代码，并且已经将其置于数据最终会加载但不会成为 s-s-r 页面的状态。有没有其他人处理过这个问题？ 我正在使用下一个，apollo 客户端和 apollo server express。

【问题讨论】：

发布您的代码。

【参考方案1】：

当您执行 s-s-r 时，代码会在服务器上运行。您在浏览器中添加的 cookie 默认不可用。然后您可以通过req.headers.cookie 访问getInitialProps 或getServerSideProps 并再次将其传递给验证码。

或者，您可以使用支持同构 cookie 的 npm 模块，例如 react-cookie https://www.npmjs.com/package/react-cookie。链接上提供了更多关于集成的示例。

【参考方案2】：

我们可以在发送前自定义标题。

请在此链接https://github.com/apollographql/apollo-client/issues/5089#issuecomment-749301669查看我的完整答案

async function getHeaders(ctx) 
  if (ctx?.req?.cookies) 
    const cookieItems = []
    for (let key of Object.keys(ctx?.req?.cookies)) 
      cookieItems.push(`$key=$ctx.req.cookies[key]`)
    
    return 
      cookie: cookieItems.join('; ')
    
  

  return 
  

WithApollo.getInitialProps = async (ctx) => 
      const  AppTree  = ctx
      // Initialize ApolloClient, add it to the ctx object so
      // we can use it in `PageComponent.getInitialProp`.
      const apolloClient = (ctx.apolloClient = initApolloClient(null, await getHeaders(ctx)))
      // Run wrapped getInitialProps methods
      let pageProps = 
      if (PageComponent.getInitialProps) 
        pageProps = await PageComponent.getInitialProps(ctx)
      

    ............