graphql/yoga-server/docs/features/cookies

[giscus[bot]]

graphql/yoga-server/docs/features/cookies

GraphQL Yoga Documentation

https://the-guild.dev/graphql/yoga-server/docs/features/cookies

[marcusbesjes]

I have did this but there seems to be a problem with the useCookies plugin in that it crashes when trying to send a response without setting a cookie. I created a small repository to recreate the problem here: https://github.com/marcusbesjes/yoga-cookies

[marcusbesjes]

The error looks like

TypeError [ERR_HTTP_INVALID_HEADER_VALUE]: Invalid value "undefined" for header "set-cookie"

And it can be worked around by making sure to either set a cookie in the Cookiestore OR clear the set-cookie header manually. The problem seems to be that something in the @whatwg-node/server-plugin-cookies module sets this header to undefined which is not allowed.

[EmrysMyrddin]

Sorry for late reply on this.
The problem seems to be solved in latest version of the plugin. Try updating to version ^1.0.0.

[Andy-Wu12]

[EmrysMyrddin]

What do you mean by overridden ?
The server responds to subsequent calls with a set-cookie header which overrides the ones setted previously ?

[Andy-Wu12]

Yes. More specifically, my client-side fetch call includes credentials, which sends the JWT back to the server for each request. The useCookies() plugin responds to any subsequent call (aside from the mutation used for authentication) with a set-cookie header which overrides the already set JWT cookie to now become a session cookie.

[ardatan]

Could you try with the latest version of the plugin?

[Andy-Wu12]

Apologies, the issue doesn't exist in 1.0.1. I was using 0.0.7, which is now 2 months outdated. Sorry for the inconvenience.

[FasalMohammadh]

Iam using this plugin but it set the cookie as non http-only cookie how can i set it as http-only cookie

[EmrysMyrddin]

A PR has just been opened this afternoon to allow this, should be merged and available very soon.

[EmrysMyrddin]

You should now be able to set cookies HttpOnly using @whatwg-node/[email protected] :-)

request.cookieStore.set({
	name: 'authorization'
	//...
	httpOnly: true,
})

[fidGaib]

what to write on domain?

[enri90]

Is possibility to apply a signature on the cookie?
https://github.com/honojs/hono/blob/main/src/utils/cookie.ts

[xavierbeillas]

As a batterie included solution why not implement cookie management inside yoga ? Feels a bit clunky at the moment.

[ardatan]

What is clunky for you? You can install this plugin and handle cookies within resolvers and other plugins.

[xavierbeillas]

Thx for your reply ! I mean I wish I had something out of the box. As I mentioned previously I would choose yoga to be the all in one graphql server solution. Even a simple solution as apollo does 🤷🏼‍♂️.

[smolinari]

An HTTP cookie is a small piece of data that holds an information to let the server recognize the client. You can learn...

I'd rewrite that to be:

An HTTP cookie holds information the server needs on requests from the client and the information is, in most cases, specific to that client. Such information, for example, could be anything from session information to a refresh token to configuration state. You can learn...

User or client recognition is just one use case for cookies. 😁

Scott

[fridaystreet]

trying the following

await this.context.request.cookieStore?.set('refresh_token', {
value: refresh_token, //confirmed this is a jwt string
secure: true,
expires,
sameSite: 'none',
httpOnly: true,
domain: !process.env.IS_OFFLINE ? '.mydomain.com' : undefined
})

but the headers isn't getting created properly.

Set-Cookie: refresh_token=%5Bobject%20Object%5D; Path=/; SameSite=Strict

any thoughts? I feel like I'm just missing somehting obvious, but I've looked through the API docs, can't see what the issue is here. None of the cookie settings are coming through. I can confirm the response headers before sent to cleint are the same. this is the header coming stright out of yoga

[fridaystreet]

all good worked it out after staring at it for ages and hoping the answer would jump out! lol

This document appears to be incorrect, the following doesn't work
await ctx.request.cookieStore?.set(args.name, args.value)

as per doco on the API page from the link above, the name and value aren't separate args. it just needs an object passed

await cookieStore?.set({
name: 'name',
value: '...',
...
})

[madsbuch]

This seems to nok work with Pothos. Currently, I have the issues that cookies are not flushed to the client and saved across requests.

[madsbuch]

I made this bug report on the issue: #3114

[mieradi]

I cannot seem to get this to work. Tried the solutions in the thread. I can access the CookieStore without issue, but calling set does not result in a cookie being set in the browser.

Is anyone able to successfully use this plugin? I am running v1.0.3

[EmrysMyrddin]

Hi! Sorry for the late response on this subject.

Did you solved your issue ?
If not, can you please check if the cookie is present in the HTTP response ? Sometimes, the cookie is sent, but the browser doesn't stores it because it has some attributes that is preventing it (Secure, Domain, Path, etc...)

Otherwise, can you please open an issue with a reproduction or a PR with a failing test so that we can help you on this?

[mieradi]

I did solve the issue, but did so without using useCookies

[webdo6263]

Does this have typescript support?
The context.request.cookieStore throws an error

[ardatan]

After installing the plugin, you should have "cookieStore" property typed in the request object. If not, could you create an issue with a reproduction on CodeSandbox? Thanks?!

[noltron000]

While the other user may or may not have legitimate issues, I've found that my context is correctly typed -- having set it up with GraphQL Code Generator. Anecdotally, TS types work fine on my machine :)

[noltron000]

Hello! I am having issues receiving the cookie in my frontend. It appears no cookie gets received or set.

In my backend, I have something like:

	// ...

	await cookieStore.set({
		name: 'refreshToken',
		value: refreshToken,
		expires: Date.now( ) + MAX_COOKIE_AGE_IN_SECONDS,
		domain: null,
		httpOnly: true,
		// sameSite: 'lax', // 'none' | 'lax' | 'strict'
	})

	console.info((await cookieStore.get('refreshToken')))

	// Return the access token to the backend system.
	return accessToken

In my frontend, I have something like:

/**
Uses the given access token to request
	the current user's data.
**/
const getMe = async (params: GetMeParams) => {
	const response = await request(
		backendUrl,
		getMeQuery,
		{ },
		{
			Authorization: `Bearer ${params.accessToken}`,
		},
	)

	return response.getMe
}

Clearly, my refresh token is getting set as a token on the backend (as .get does provide the cookie data). In addition, it works through the GraphiQL client. As in, my refresh token routes work great there.

I've seen posts claiming I need to set up my cors headers correctly, using something like "Access-Control-Allow-Credentials" in nginx, or using {credentials: 'include'} in some fetch parameter. I've been messing around with things but I haven't exactly found what my issues are yet. If anyone has guidance, that may be quite helpful! Thanks.