While working with a Next.js API that uses Apollo GraphQL I found my queries were not completing and remained in a pending state indefinitely. Here's how to fix this annoying issue.

If you're trying to implement a GraphQL API on Next.js it's likely you've settled on using Apollo GraphQL Micro as it's perfect for use on Next.js' serverless API. If after implementing Apollo you found your queries getting stuck in a pending state it's because of a lesser known Next.js setting.

Go into the file where your GraphQL handler runs (for me it was pages/api/index.js) and export this simple object:

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

This will disable an enabled-by-default option on the API which parses the body of your request, which for one reason or another doesn't seem to play well with Apollo Server.

Your other option is to just not use Apollo Server. From my testing, I've discerned that** graphql-js is a pretty good alternative** that doesn't require this setting while still working with a serverless API.