https://github.com/ian/next-graphql

next-graphql = GraphQL + Next.js
https://github.com/ian/next-graphql

graphql nextjs typescript zeit-functions

Last synced: 22 days ago
JSON representation

next-graphql = GraphQL + Next.js

• Host: GitHub
• URL: https://github.com/ian/next-graphql
• Owner: ian
• License: apache-2.0
• Created: 2020-04-19T18:20:48.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-02-16T23:42:15.000Z (almost 2 years ago)
• Last Synced: 2024-12-12T15:50:47.837Z (about 1 month ago)
• Topics: graphql, nextjs, typescript, zeit-functions
• Language: TypeScript
• Homepage:
• Size: 1.17 MB
• Stars: 34
• Watchers: 2
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# next-graphql

`next-graphql` is an easy to use Next.js library for creating performant GraphQL endpoints on top of [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction).

Start building GraphQL servers with Next.js.

## Features

* built using [Envelop](https://www.envelop.dev) and [Helix](https://graphql-helix.vercel.app) - stackable and easy to extend architecture

* supports Vercel Edge functions 

## Install

```

npm install next-graphql

```

```

pnpm add next-graphql

```

```

yarn add next-graphql

```

## Usage

`next-graphql` uses [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction). Create the `pages/api/graphql.js` with the following content:

### with `graphql`

```ts

import { createGraphQLHandler } from "next-graphql";

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:

```ts

import { createGraphQLHandler } from "next-graphql";

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;

```

### with Pothos