Using:
In GraphQL playground, I could change “request.credentials” value from “omit” to “include” via the playground’s settings to allow cookies to be sent alongside the request.
How to I replicate this setting in Apollo Studio since the GraphQL playground is now retired?
Thank you in advance!
@hwillson I did everything mentioned in the docs, yet the playground says “Unable to reach server”. My editor and nodemon shows no errors. Everything works when I turn the Allow Cookies toggle off.
Here is the express part of my code:
app.use(
session({
name: "myCookie",
store: new RedisStore({ client: redisClient, disableTouch: true }),
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 365 * 10, //10 years
httpOnly: true,
secure: true,
sameSite: "none",
},
saveUninitialized: false,
secret: "guydgwyagdakhdkui7iudh",
resave: false,
})
);
app.use(
cors({
credentials: true,
origin: "https://studio.apollographql.com",
})
);
const apolloServer = new ApolloServer({
schema: await buildSchema({
resolvers: [HelloResolver, PostResolver, UserResolver],
validate: false,
}),
context: ({ req, res }): MyContext => ({ em: orm.em, req, res }),
});
await apolloServer.start();
apolloServer.applyMiddleware({ app });
app.listen(4000, () => {
console.log("Server started at http://localhost:4000");
});
Any clue on what I am getting wrong?
Did you find a solution? Running into exact same issue
Try this
const cors = {
credentials: true,
origin: 'https://studio.apollographql.com'
}
apolloServer.applyMiddleware({ app, cors })
Not working here, as this setting is to decide:
whether to expose the response to the frontend JavaScript code when the request’s credentials mode (Request.credentials) is include.
the prerequesty is that that the client(was GraphQL playground before, now should be the Apollo Studio) request with Request.credentials set to ‘inlucde’. But I can find no settings related in Apollo Studio.
As a workaround, I find this stackoverflow question to use ApolloServerPluginLandingPageGraphQLPlayground plugin as the landing page
@calscks @aniruddh @bashgardev @daolanfler In addition to setting the right headers on your request response per the docs, did you turn on “Include cookies” from the Sandbox Connection Settings modal?
This is what sets the Sandbox to actually set credentials: include as part of the request. I attached some screenshots to find this setting:
Yes, I have. And this is the server’s cors and cookie setting:
const corsOptions: CorsOptions = {
origin: "https://studio.apollographql.com",
credentials: true,
// exposedHeaders: ["Set-Cookie", "connection"],
};
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // 10 years
httpOnly: true,
secure: true,
sameSite: 'none'
}
Hi there,
Any chance you might be able to send a runnable repro or codesandbox? 
Taking a wild stab, if using express-session, cookie-session, or something else based on cookies (the npm package), I wonder if you might be hitting the same problem as this person did in this issue, and if that’s the case, then perhaps the workaround described here might also work for you?
(essentially express-session is silently refusing to set the set-cookie header for localhost http endpoints to adhere to an older revision of the spec; one workaround is to trick it into setting it anyway by saying the request comes from a secured proxy; express-session’s maintainer also proposes another workaround by overwriting the value of req.secure )
Hello
To solve that you need to pass cors when applying the apolloSever.applyMiddleware
like so:
apolloSever.applyMiddleware({
app,
cors: { credentials: true, origin: "https://studio.apollographql.com" },
});
I’m also having the same issue here and adding the ‘cors’ object to the applyMiddleware method does not fix the issue.
Has there been any progress on this everyone? @daolanfler @aniruddh
(I also feel like we are all debugging the same outdated tutorial)
I did work out that the solutions work in chrome but not firefox if that is of any help for anyone.
The session library does not pass along the secure: true option to the cookie if protocol is http. Following @Chang s post, this workaround worked for me finally. 
Would be useful to know which tutorial this is so we can perhaps add the solution there, does anyone have a link?
the tutorial is here Fullstack React GraphQL TypeScript Tutorial - YouTube
And @vippelina 's answered solved this problem 
Source: https://stackoverflow.com/a/70673115/11171286
– tdranv (stackoverflow)
Adding the old playground as a plugin probably works but, since they say it is being deprecated, if you want to make it work with the new Apollo Studio, here is how I managed to do it:
I added these three lines right after initializing the app:
app.set("trust proxy", !process.env.NODE_ENV === "production");
app.set("Access-Control-Allow-Origin", "https://studio.apollographql.com");
app.set("Access-Control-Allow-Credentials", true);
Here is how the configuration of my session looks like:
const RedisStore = connectRedis(session);
const redisClient = redis.createClient();
app.use(
session({
saveUninitialized: false,
store: new RedisStore({ client: redisClient }),
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 365 * 1, // 1 year
httpOnly: true,
sameSite: "none",
secure: true, // if true, studio works, postman doesn't; if false its the other way around
},
name: "qid",
secret: "keyboard cat",
resave: false,
}),
);
Then, over to Apollo Studio, go to Connection Settings → Edit → Include Cookies (this one was really hard to find):
Make sure to send this header with every request to login: x-forwarded-proto: https
I manage to solve this by combining this solution with another solution above
Hi Folks! We (Apollo) now support an embedded version of the Apollo Sandbox & Apollo Explorer that you can host on your Apollo Server endpoint urls. This will remove the need to whitelist the Apollo Studio endpoint in your CORS configuration to use our Explorer. You can use the Explorer right on your server endpoint.
For local development endpoints, pass embed: true to the ApolloServerPluginLandingPageLocalDefault plugin in your Apollo Server config. See more details here.
For production endpoints, pass a graphRef and embed: true to the ApolloServerPluginLandingPageProductionDefault plugin in your Apollo Server config. See more details here.