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

Question

I'm building a NextJS app, and I'm trying the access a cookie so I can use it to set a Http Header for GraphQL Request, I am using apollo-link-context. This is the code to create the 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
}

The issue here is that the getCookieFromServer function expects an Express Request as the second argument, so it can extract the cookie from req.headers.cookie, and I have no idea where I can get it from there.

Answer 1

I finally found a way. Whenever I send a request from the server (in PageComponent.getInitialProps), I set the header in the context, then I can access it from setContext:

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

Then in setContext:

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

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

  return ({ headers })
})

So if the header is already present in the previous context (which is the case when sent from the server), just use it. If it is not present (when sent from the browser), get the cookie from the browser and set it.

I hope it will help somebody one day.