next-graphql-server's Introduction

next-graphql-server

next-graphql-server is an easy to use Next.js library for creating performant GraphQL endpoints on top of Next.js API Routes.

Start building GraphQL servers with Next.js.

Features

built using Envelop and Helix - stackable and easy to extend architecture
supports Vercel Edge functions

Getting Started

Create a Next.js project:

pnpm create next-app --typescript

Add next-graphql-server as a dependency to your Next.js project:

pnpm add next-graphql-server

Note: pnpm is preferred, but you can also use npm or yarn

npm install next-graphql-server

yarn add next-graphql-server

Usage

next-graphql-server uses Next.js API Routes. Create the pages/api/graphql.ts with the following content:

Note: The file in pages/api must be named graphql

with `graphql`

Add graphql

pnpm add graphql

import { createGraphQLHandler } from "next-graphql-server";
import {
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLString,
} from "graphql";

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: "Query",
    fields: () => ({
      hello: {
        type: GraphQLString,
        resolve: () => "world",
      },
    }),
  }),
});

const handler = createGraphQLHandler(schema);
export default handler;

with `@graphql-tools`

Add @graphql-tools/schema

pnpm add @graphql-tools/schema

In pages/api/graphql.ts define your handler as shown below:

import { createGraphQLHandler } from "next-graphql-server";
import { makeExecutableSchema } from "@graphql-tools/schema";

export const schema = makeExecutableSchema({
  typeDefs: /* GraphQL */ `
    type Query {
      hello: String!
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'World',
    },
  },
});

const handler = createGraphQLHandler(schema);
export default handler;