Combine auth0 example with Apollo API routes

[Kinbaum]

Hello, I'm looking for some guidance on how to combine two of the examples listed in this repo, auth0 and api-routes-apollo-server-and-client.

I have both of these working separately, but what I would like to do is get my session from auth0 and add my user to the apollo server context. When I attempted to do this, I saw that my session cookie was coming through on my graphql api route, but then it suddenly becomes an empty object.

I've added my api route code below so that you can see what it is I'm attempting to do. Thank you in advance.

pages/api/graphql.js

import { ApolloServer } from 'apollo-server-micro';
import { schema } from 'apollo/schema';
import auth0 from 'lib/auth0';

export const config = {
    api: {
        bodyParser: false
    }
};

const apolloServer = new ApolloServer({
    schema,
    // Tried to make this async and call auth0.getSession(req)
    // but because the cookies are {} my session is null
    context: async ({ req }) => {
        const session = await auth0.getSession(req);
        return session;
    }
});

// Created this HOF so that I could log out the cookies
const handler = apollo => async (req, res) => {
    // Works once, then is {}
    console.log(req.cookies);
    return apollo(req, res);
};

export default handler(apolloServer.createHandler({
    path: '/api/graphql'
}));

[brianlovin]

I could be totally wrong here, but I think the context field in your ApolloServer creation needs to return an object. Right now it's returning the session (I don't know if that's an object in auth0, but might be worth looking at).

I don't use auth0, but here's how I got cookies into my context object:

• https://github.com/brianlovin/brian-lovin-next/blob/master/src/pages/api/graphql/index.ts
• https://github.com/brianlovin/brian-lovin-next/blob/master/src/graphql/helpers/withCookies.ts
• https://github.com/brianlovin/brian-lovin-next/blob/master/src/graphql/context/index.ts

[Kinbaum]

Yeah that's an object containing user, accessToken, etc. I'll give the solution you provided a go and see what I get.

[Kinbaum]

This isn't really behaving as I would like... When I request the /api/graphql playground through the browser, my cookie comes through with { a0:session: 'cookie value' } for a second, then I see some subsequent logs in my console output and I can see that I lose the session cookie as it shows {}.

I don't want to set the headers on the response, rather just read the incoming http.IncomingMessage. I'm wondering if somehow the req object is getting reset or is a different context altogether. This works with all of the my other API routes from the auth0 example and I can just say auth0.getSession(req), so I just need the graphql api to treat it in a similar fashion. I think what I'm seeing is what's outlined here.

req.cookies - An object containing the cookies sent by the request. Defaults to {}

[Kinbaum]

For anyone else looking to do something similar to what I am, I have figured out the missing setting on the apollo server.

const apolloServer = new ApolloServer({
    context: ctx => ctx,
    /**
     * Add introspection to view the schema / docs in playground after running `next build` and `next start`
     * Without introspection, you'll get a message saying "Server cannot be reached"
     */
    introspection: true,
    playground: {
        settings: {
            'request.credentials': 'same-origin'
        }
    },
    schema
});

Adding the playground settings did the trick for me. Now I have access to my session cookie with each of my resolvers.

[kukicado]

After 10 hours of research this did it!! Thanks so much for sharing the solution