Cookies are not being sent in Playground Express

[alex996]

This issue pertains to the following package(s):

• GraphQL Playground Express Middleware

What OS and OS version are you experiencing the issue(s) on?

Ubuntu 16.04.4 LTS xenial

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

1.7.0

What is the expected behavior?

It should send browser cookies along with the GraphQL request.

What is the actual behavior?

The cookies are absent in the request originating from Playground.

What steps may we take to reproduce the behavior?

You can reproduce it with a demo app on glitch

1. Open the app to land at /, a cookie is set
2. Navigate to /graphql and run a query { hello }
3. Observe the browser console and/or glitch console

You can see that Cookie is missing from Request Headers even though it is set in the browser

The cookie is hence not sent over to express

Note that the demo app runs on Apollo Server v2 which uses apollo-server-express version 1.7.0 under the hood. I took the following screenshot from twitch terminal, inside node_modules

[alex996]

With further searching, I found that the cookies can be turned on in settings. But is there a way to pass those options in Node? It's also complicated by the fact that I am using the playground behind Apollo Server.

[oxyno-zeta]

I have the same problem.
I've tried this but it is not working.

app.get('/graphiql', expressGraphqlPlayground({
        endpoint: '/graphql',
        settings: {
            'request.credentials': 'include',
        },
    }));

If you have an idea !

Thanks !

[gustavlrsn]

Also using playground behind Apollo Server and having the same issue.

[tanekim88]

Yes, I confirmed that this is still an issue.

[frederikhors]

Yes, still an issue today, with apollo-server I'm using this without success:

const serverApollo = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ req }) => {
    return {...code...};
  }
  playground: {
    settings: {
      "request.credentials": "include"
    }
  }
});

It doesn't work!

[Josaber]

I am using this:

  playground: {
    settings: {
      'request.credentials': 'same-origin'
    }
  }

It still doesn't work. The same as @frederikhors

[Josaber]

And, I tried 'request.credentials': 'include', too. It doesn't work either.

[vladanpaunovic]

I am using

'request.credentials': 'same-origin',

But still, the issue is there. Cookies are not being set.

[vladanpaunovic]

Here is what I found as a workaround:

1. Go to your GraphQl Playground

2. In the top right corner click on the gear icon (settings)

3. Change the following

{
-  "request.credentials": "omit",
+  "request.credentials": "same-origin",
}

Somehow, the client is not using the server settings, therefore it consumes request.credentials: "omit" instead of "same-origin"

[Josaber]

@vladanpaunovic Yes, we use this too.

[curry684]

That's not so much a workaround as the actual bug - the default user settings are always "omit" instead of the serverside defined default.

[vincenzo]

I am trying to collect all these 'settings' issues in one place; I think it's beneficial that all of them are taken into consideration at once, lest we end up with partial fixes or fixes that break other stuff.

Here's the place: #826

Could you all have a look and confirm the problem in this present issue has been captured in the one above?

[manjula-dube]

Is 'include' linked to boolean value false? Seems like because in my case both of the code works

playground: {
    settings: {
      'request.credentials': false,
    }
  }

playground: {
    settings: {
      'request.credentials': 'include',
    }
  }

Seems like the way it works is my access token is in cookie, So if I login from app, cookie is set
That cookie is sent to playground requests as well. And so the app and graphql end point is in sync

[Fxlr8]

Oh my god, I wasted so much time on this problem! @vladanpaunovic answer helped

[mcouthon]

I was having what seemed like CORS issues with apollo-server behind OIDC authentication (Okta), and this was killing me. Thank you @vladanpaunovic !!!

For anyone seeing Server cannot be reached in the playgroung, this was the only solution that worked for me.

[TheUniqueMathemagician]

Hi guys, using Apollo-server-express, I also got issue where the cookie wasn't sent with playground.

After some trials an errors I found this solution that worked for me. Hope it helps someone.

ApolloServerPluginLandingPageGraphQLPlayground({
    settings: {
        "request.credentials": "include",
        "editor.reuseHeaders": false,
    }
})

[kelvinbush]

Here is what I found as a workaround:

1. Go to your GraphQl Playground
2. In the top right corner click on the gear icon (settings)
3. Change the following

{
-  "request.credentials": "omit",
+  "request.credentials": "same-origin",
}

Somehow, the client is not using the server settings, therefore it consumes request.credentials: "omit" instead of "same-origin"

This works fine.Thank you

[acao]

For reference, the apollo fork of playground lives here:

https://github.com/apollographql/graphql-playground

If you have any issues with apollo server‘s fork of playground, you can visit apollo‘s spectrum support chat!

[onadebi]

I encountered this issue and after trying much of what has already been highlighted here, none still worked for me.
However, after digging further, I realized that when running on your localhost. The secure property of your cookie object should always be set to false The below code snippet from my express app solved it for me.

app.use(
    session({
        store: new RedisStore({ client: redisClient}),
        name: 'qid',
        secret: 'superdupersecret',
        resave: false,
        saveUninitialized: false,
        cookie: {
            httpOnly: true,
            secure: false,
            maxAge: 1000 * 60 * 60 * 24 * 365
        }
    })
);

[Connorapple]

With Apollo studio not having the ability to change the settings for request.credentials, I found that adding the following settings to the cookie will make the cookie pass and stop returning undefined data:

httpOnly, secure, and SameSite:none