In this tutorial, I'll guide you through enabling cookies between Apollo Studio and a NodeJS GraphQL server. We'll cover how to implement a cookie-based session approach using tools like express-session
, ioredis
, and connect-redis
.
Setting Up Your Session with Redis
First, let's configure your session setup with Redis. Ensure your session is set up correctly with sameSite
and secure
cookie properties as these are necessary for the desired functionality in Apollo Studio.
const redisClient = new Redis();
redisClient.on("connect", () => {
console.log("Redis connected");
});
redisClient.on("error", (err) => {
console.error("Redis connection error:", err);
});
let redisStore = new RedisStore({
client: redisClient,
prefix: "myapp:",
disableTouch: true
});
app.use(
session({
name: "myCookie",
store: redisStore,
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // Alive for 10 years
httpOnly: true,
sameSite: "none",
secure: true
},
secret: "qpwdomwqeoxqiewpoqjh",
resave: false,
saveUninitialized: false,
}),
);
Configuration for Postman and Apollo Studio
To make Postman work, switch sameSite
to "lax"
and secure
to process.env.NODE_ENV === 'production'
. For Apollo Studio, keep the configuration as shown above.
cookie: {
sameSite: "lax",
secure: process.env.NODE_ENV === 'production'
}
Configuring Apollo Studio
-
Enable Cookies in Apollo Studio:
- Open Apollo Studio.
- Click the cog icon in the upper left-hand corner to open the connection settings dialog.
- Toggle "Include Cookies" to ON.
-
Server Configuration:
- Add these 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);
-
CORS Configuration:
- Add the URL to your CORS origin header and enable credentials in your
server.ts
:
const cors = { credentials: true, origin: "https://studio.apollographql.com", };
- Add the URL to your CORS origin header and enable credentials in your
-
Apply Middleware:
- Pass the
cors
when applying the Apollo Server middleware:
apolloServer.applyMiddleware({ app, cors });
- Pass the
Final Server Configuration
Your server.ts
should look like this:
const app = express() as any;
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);
const redisClient = new Redis();
redisClient.on("connect", () => {
console.log("Redis connected");
});
redisClient.on("error", (err) => {
console.error("Redis connection error:", err);
});
let redisStore = new RedisStore({
client: redisClient,
prefix: "myapp:",
disableTouch: true
});
const cors = {
credentials: true,
origin: "https://studio.apollographql.com",
};
app.use(
session({
name: "myCookie",
store: redisStore,
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // Alive for 10 years
httpOnly: true,
sameSite: "none",
secure: true
},
secret: "qpwdomwqeoxqiewpoqjh",
resave: false,
saveUninitialized: false,
}),
);
const apolloServer = new ApolloServer({
schema: await buildSchema({
resolvers: [],
validate: false
}),
context: ({ req, res }): MyContext => ({
req,
res,
redis: redisClient,
})
});
await apolloServer.start();
apolloServer.applyMiddleware({ app, cors });
Setting the X-Forwarded-Proto
Apollo Studio Header
In the Shared headers section at the bottom of the dialog, set a header called x-forwarded-proto
and assign it a value of https
.
x-forwarded-proto: https
Make sure to send this header with every request. When you make a login request, you'll have your cookie set.
Then, use the Me
query to check if there's a user logged in and session active.
I hope this tutorial helps you set up your cookies properly with Apollo Studio and your NodeJS GraphQL server. Happy coding! 😊
Top comments (0)