Cookies Setup in Apollo Studio for NodeJS GraphQL Servers

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

1. 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.

2. 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);
   

3. 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",
   };
   

4. Apply Middleware:

   • Pass the cors when applying the Apollo Server middleware:

   apolloServer.applyMiddleware({ app, cors });
   

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! 😊