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

Question

我正在构建一个 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({
    ssrMode: typeof window === 'undefined',
    cache: new InMemoryCache().restore(initialState),
    link: authLink.concat(httpLink)
  })

  return client
}

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

Answer 1

终于找到方法了。每当我从服务器发送请求时（在 PageComponent.getInitialProps 中），我在上下文中设置 header，然后我可以从 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 })
})

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

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

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

How to access Express HTTP Request from Apollo Link Context, in a NextJS App?

javascript

express

next.js

apollo-client