apollo-server-nextjs

This is a Next.js 12 integration of GraphQL Server. It is early work and has not been extensively tested in production.

It is based on samples provided by @glasser and the official apollo-server-lambda integration.

Apollo Server is a community-maintained open-source GraphQL server that works with many Node.js HTTP server frameworks. Read the docs. Read the CHANGELOG.

Getting Started

This section assumes that you already have a running Next.js project.

npm install apollo-server-nextjs graphql

Create a file named pages/api/graphql.js, place the following code:

import { ApolloServer, gql } from "apollo-server-nextjs";
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => "Hello world!",
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,

  // By default, the GraphQL Playground interface and GraphQL introspection
  // is disabled in "production" (i.e. when `process.env.NODE_ENV` is `production`).
  //
  // If you'd like to have GraphQL Playground and introspection enabled in production,
  // install the Playground plugin and set the `introspection` option explicitly to `true`.
  introspection: true,
  plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
});

export default server.createHandler();

// Disable Next.js body parsing so that Apollo Server can access it entirely
export const config = {
  api: {
    bodyParser: false,
  },
};

Then open http://localhost:3000/api/graphql

Modifying the Response (Enable CORS)

To enable CORS the response HTTP headers need to be modified. To accomplish this use the cors option.

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

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => "Hello world!",
  },
};

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

export default server.createHandler({
  expressGetMiddlewareOptions: {
    cors: {
      origin: "*",
      credentials: true,
    },
  },
});

To enable CORS response for requests with credentials (cookies, http authentication) the allow origin header must equal the request origin and the allow credential header must be set to true.

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

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => "Hello world!",
  },
};

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

export default server.createHandler({
  expressGetMiddlewareOptions: {
    cors: {
      origin: true,
      credentials: true,
    },
  },
});

Cors Options

The options correspond to the express cors configuration with the following fields(all are optional):

• origin: boolean | string | string[]
• methods: string | string[]
• allowedHeaders: string | string[]
• exposedHeaders: string | string[]
• credentials: boolean
• maxAge: number

Principles

GraphQL Server is built with the following principles in mind:

• By the community, for the community: GraphQL Server's development is driven by the needs of developers
• Simplicity: by keeping things simple, GraphQL Server is easier to use, easier to contribute to, and more secure
• Performance: GraphQL Server is well-tested and production-ready - no modifications needed

Anyone is welcome to contribute to GraphQL Server, just read CONTRIBUTING.md, take a look at the roadmap and make your first PR!