如何在 NextJS 应用程序中从 Apollo 链接上下文访问 Express HTTP 请求？

Posted 2023-03-06

【中文标题】如何在 NextJS 应用程序中从 Apollo 链接上下文访问 Express HTTP 请求？

【英文标题】：How to access Express HTTP Request from Apollo Link Context, in a NextJS App?

【发布时间】：2020-04-02 18:20:07

【问题描述】：

我正在构建一个NextJS 应用程序，我正在尝试访问cookie，因此我可以使用它为GraphQL Request 设置Http Header，我正在使用apollo-link-context。这是创建ApolloClient的代码

function createApolloClient(initialState = ) 
  const httpLink = new HttpLink( uri: `$baseUrl/graphql`, credentials: 'same-origin', fetch )

  const authLink = setContext((_, prevCtx) => 
    let token = ''
    if (typeof window === 'undefined') token = getCookieFromServer(authCookieName, REQ)
    else token = getCookieFromBrowser(authCookieName)
    return ( headers:  'Auth-Token': token  )
  )

  const client = new ApolloClient(
    s-s-rMode: typeof window === 'undefined',
    cache: new InMemoryCache().restore(initialState),
    link: authLink.concat(httpLink)
  )

  return client

这里的问题是 getCookieFromServer 函数需要 Express Request 作为第二个参数，因此它可以从 req.headers.cookie 中提取 cookie，我不知道从哪里可以得到它。

【参考方案1】：

我终于找到了办法。每当我从服务器（在PageComponent.getInitialProps）发送请求时，我都会在上下文中设置标头，然后我可以从setContext 访问它：

PageComponent.getInitialProps = async (ctx) => 
  ...
  const token = getCookieFromServer(authCookieName, ctx.req)
  const  data  = await client.query(
    query,
    context:  headers:  'Auth-Token': token  
  )
  ...

然后在setContext中：

const authLink = setContext((_, prevCtx) => 
  let headers = prevCtx.headers || 

  if (!headers['Auth-Token']) 
    const token = getCookieFromBrowser(authCookieName)
    headers =  ...headers, 'Auth-Token': token 
  

  return ( headers )
)

因此，如果标头已经存在于先前的上下文中（从服务器发送时就是这种情况），则只需使用它即可。如果不存在（从浏览器发送时），从浏览器获取 cookie 并设置它。

我希望有一天它会对某人有所帮助。