apollo-server: Error in 3.0+ version of apollo-server-micro with Next.js, requires server.start() in server less environment

Thanks for this @marklawlor - I’ll pass this to our devrel team. Getting more concrete examples put together that show how to use Next.js with Apollo Client and Apollo Server is definitely something we want to do, and enhancing our SSR approach in Apollo Client to make sure it works more seamlessly with Next specifically, is something we’re planning.

@carlosazaustre While that does work, it does not address the original issue.

Apollo’s documentation state Call start only if you are using a middleware integration for a non-“serverless” environment .

Most Next.JS projects are “serverless” and will have a negative performance impact by calling .start()

Apollo do not count apollo-server-micro as a serverless package, but most users are probably using it in a serverless environment. There should be a mode to allow apollo-server-micro to operate in a serverless mode similar to apollo-server-lambda.

🎉 Solved!

You need to install micro along as apollo-server-micro,

And this is the code that works, kudos to William Lyon (@lyonwj)

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

const typeDefs = {...};
const resolvers = {...};

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

const startServer = apolloServer.start();

export default async function handler(req, res) {
  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
}

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

Hey @glasser I noticed you’ve been reaching out to developers for clarification on this issue and I really appreciate that. But I feel issues like this popup due to a surprising lack of information on how to integrate Apollo and Next.JS

@stemmlerjs @kkemple have written blog posts about Apollo Client, but nothing about Apollo Server, and nothing past a getting started.

For example, those posts also don’t explain to enable Apollo Client’s SSR using getDataFromTree with Next.JS. There is a discussion with 100+ comments but there’s no consensus on a solution. The recommended solutions are manually build your own cache by importing every query that will be run. Which doesn’t scale past a getting started example.

Maybe this needs a community solution, but I’m hoping someone from Apollo’s Developer Advocate team could write blog post could clarify exactly how to use Apollo Server with Next.JS which also show cases how to incorporate advanced Apollo features like getDataFromTree.

I filed https://github.com/vercel/next.js/pull/30082 to fix Next.js’s examples.

I’m not sure why its the communities responsibility to explain why the Apollo/NextJS user base is using micro. In lieu of an official example, the community is going to use the best (only?) documented solution.

Continuing this discussion a little bit, if people are interested in using Apollo Server with NextJS, codepen.io recently blogged on how they are using NextJS and Apollo. However the NextJS devs responded that this may have performance impacts, (direct link to comment) make sure you understand those gotchas.

The apollo-server-vercel also exists, but recently updated their README to explain that the project is still under development and has no guarantee of maintenance.

Yes, I asked the author of the example why they chose Micro a couple of months ago and haven’t heard back.