Upgrading Next.js example to apollo-server v3

[m-abdelwahab]

I tried upgrading this example to use apollo-server-micro v3 with Next.js API routes and I couldn't figure out how to do it. I created the following repo and I ran into issues with running Apollo Studio. I would love to get some help :)

I can then create a PR for the Next.js examples

EDIT: you'll find a working solution down below. Feel free to suggest improvements :) You can clone this repo to test it

[LexSwed]

In my case, I do

const serverStart = ApolloServer.start()  // only needs to be called once

const handler: NextApiHandler = async (req, res) => {
  await serverStart
  const graphqlHandler = ApolloServer.createHandler({ path: '/api/graphql' })

to avoid "suprising state" from Apollo.
Still coudln't make Sandbox to make requests to my localhost, the requests don't even reach my local API handler.

[LexSwed]

Also, I try to just set the headers, as recommended in Apollo Studio

res.setHeader('Access-Control-Allow-Credentials', 'true')
res.setHeader('Access-Control-Allow-Origin', 'https://studio.apollographql.com')

[m-abdelwahab]

Update:

This solution worked:

import { PageConfig } from "next";
import Cors from "micro-cors";
import { ApolloServer, gql } from "apollo-server-micro";

const typeDefs = gql`
  type Query {
    users: [User!]!
  }
  type User {
    name: String
  }
`;

const resolvers = {
  Query: {
    users(parent, args, context) {
      return [{ name: "Nextjs" }];
    },
  },
};

const cors = Cors({
  origin: "https://studio.apollographql.com",
  allowCredentials: true,
});

const apolloServer = new ApolloServer({ typeDefs, resolvers });

const startServer = apolloServer.start();

export default cors(async (req, res) => {
  if (req.method === "OPTIONS") {
    res.end();
    return false;
  }
  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
});
// // Apollo Server Micro takes care of body parsing
export const config: PageConfig = {
  api: {
    bodyParser: false,
  },
};

You can clone this repo to test it

[m-abdelwahab]

This also works without using micro-cors

import { PageConfig } from "next";
import { ApolloServer, gql } from "apollo-server-micro";

const typeDefs = gql`
  type Query {
    users: [User!]!
  }
  type User {
    name: String
  }
`;

const resolvers = {
  Query: {
    users(parent, args, context) {
      return [{ name: "Nextjs" }];
    },
  },
};

const apolloServer = new ApolloServer({ typeDefs, resolvers });

const startServer = apolloServer.start();

export default async (req, res) => {
  if (req.method === "OPTIONS") {
    res.end();
    return false;
  }
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader(
    "Access-Control-Allow-Origin",
    "https://studio.apollographql.com"
  );

  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
};
// // Apollo Server Micro takes care of body parsing
export const config: PageConfig = {
  api: {
    bodyParser: false,
  },
};

[joeynimu]

Both solutions worked for me. I also tried to set the CORS in the next.config.js file which also worked okay.

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "https://studio.apollographql.com" },
        ]
      }
    ]
  }
};

[LexSwed]

I had to set Allow-Headers for some reason also 🤔

res.setHeader('Access-Control-Allow-Headers', 'Accept, Content-Type') // removing Accept or Content-Type makes CORS to fail

🔝 I'm against global config as we only need to setup access to sandbox in staging or dev environment, not sure next.config.js allows that?

[glasser]

FWIW I don't know if next.js is different from micro here, but with micro you can do module.exports = apolloServer.start().then( ... and then return a handler; see the apollo-server-micro README for an example.