Apollo-server: Apollo request object missing cookies

[Lahori-Jawan]

• has reproduction

I am using apollo graphql in Nuxt via nuxt-apollo module that is wrapper of vue-apollo. The module integrations are working just fine but there is a problem. When I reload the page the initial page is rendered on server because its a universal app. The problem is on initial page load I don't get cookies in req header but on subsequent page navigation I do get cookies in request header because its coming from client which means I cannot get cookies when page is loaded on server.

First I was thinking its nuxt/vue-apollo problem but then I dig a bit deeper and found that the express req object does have cookies in its headers but the apollo req object doesn't. I don't know if its a bug/design decision or I am thinking wrong.

I have reproduced the minimum repo

Please help me if its possible to get cookies in my resolvers because I am stuck here in like 2 days.

Thanks

[trevorblades]

@Lahori-Jawan you should be able to access cookies from the express request by creating context as explained in #1066. I should also mention that according to express' documentation, you'll need to use the cookie-parser middleware to have cookies appear in your request object.

const server = new ApolloServer({
  context({req}) {
    // make request cookies available to all resolvers
    return {
      cookies: req.cookies
    };
  }
});

And then in your resolver, access the cookies through the third argument, context:

myResolver(parent, args, context) {
  // do something with context.cookies
}

[oznekenzo]

What about apps that don't use express?
Currently using Lambda to handle requests

[trevorblades]

@oznekenzo I'm not sure how cookies would work with a Lambda function, but the idea would be the same. You could use the context option of the ApolloServer constructor to parse the function event and extract cookies somehow.

That being said, I don't know if cookies really work in a serverless context the way they would on an express server. You might find more info out there on this topic, but here's a couple articles I found on the internet:

• Netlify functions limited to one Set-Cookie header per request: https://community.netlify.com/t/multiple-set-cookie-headers-cause-netlify-lambda-to-throw-an-error/975/2
• Custom cookies with AWS API Gateway: https://aws.amazon.com/blogs/compute/simply-serverless-using-aws-lambda-to-expose-custom-cookies-with-api-gateway/

By the sounds of it, you might be able to set/receive cookies using HTTP headers. If this is possible, you might try looking event.headers in your context function.

new ApolloServer({
  context({event}) {
    console.log(event.headers);
    return {};
  }
});

[xzedx]

@trevorblades Could you pls have a look at #4445 ? It seems that we can't set the header in context when using apollo-server-lambda now

[trevorblades]

Again, I'm not very familiar with this particular use-case, but looking at the issue you linked, they mentioned a workaround for this:

Workaround: when call callback in callbackFilter in apollo-server-lambda/src/ApolloServer, response header will include event.response.headers

You could check out this answer about setting response headers in Apollo server for more info. Hopefully that helps!