Integration with Next.js

Next.js is a web framework that allows you to build websites very quickly and GraphQL Yoga can be integrated with Next.js easily as a custom route handler.

Installation Permalink for this section

npm i graphql-yoga graphql

pnpm add graphql-yoga graphql

yarn add graphql-yoga graphql

bun add graphql-yoga graphql

Example Permalink for this section

app/api/graphql/route.ts

// Next.js Custom Route Handler: https://nextjs.org/docs/app/building-your-application/routing/router-handlers
import { createSchema, createYoga } from 'graphql-yoga'

interface NextContext {
  params: Promise<Record<string, string>>
}

const { handleRequest } = createYoga<NextContext>({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        greetings: String
      }
    `,
    resolvers: {
      Query: {
        greetings: () => 'This is the `greetings` field of the root `Query` type'
      }
    }
  }),

graphqlEndpoint: '/api/graphql',
  fetchAPI: { Response }
})

export { handleRequest as GET, handleRequest as POST, handleRequest as OPTIONS }

You can also check a full example on our GitHub repository here

Using legacy Pages Directory Permalink for this section

The App Router and custom Route Handlers only exist since NextJS 13. If you are using an older version of NextJS or still using Pages Directory layout, you can still use GraphQL Yoga as an API Route.

pages/api/graphql.ts

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
import { createSchema, createYoga } from 'graphql-yoga'

export const config = {
  api: {
    // Disable body parsing (required for file uploads)
    bodyParser: false
  }
}

const schema = createSchema({
  typeDefs: /* GraphQL */ `
    type Query {
      greetings: String
    }
  `,
  resolvers: {
    Query: {
      greetings: () => 'This is the `greetings` field of the root `Query` type'
    }
  }
})

export default createYoga<{ req: NextApiRequest, res: NextApiResponse }>({
  schema,
  graphqlEndpoint: '/api/graphql'
})

You can also check a full example on our GitHub repository here

WebSockets for subscriptions Permalink for this section

WebSockets cannot be used with Next.js API Routes, we therefore have to create a custom Next.js server that will serve the GraphQL API, WebSockets and the rest of Next.js content.

Installation Permalink for this section

npm i graphql-yoga graphql ws graphql-ws

pnpm add graphql-yoga graphql ws graphql-ws

yarn add graphql-yoga graphql ws graphql-ws

bun add graphql-yoga graphql ws graphql-ws

Example Permalink for this section

server.js

const { createServer } = require('http')
const { WebSocketServer } = require('ws')
const { createYoga, createSchema } = require('graphql-yoga')
const { useServer } = require('graphql-ws/use/ws')
const { parse } = require('url')
const next = require('next')
const { setTimeout: setTimeout$ } = require('timers/promises')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000

const app = next({ dev, hostname, port })
const graphqlEndpoint = '/api/graphql'

const yoga = createYoga({
  graphqlEndpoint,
  graphiql: {
    subscriptionsProtocol: 'WS'
  },
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        hello: String!
      }
      type Subscription {
        clock: String!
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'world'
      },
      Subscription: {
        clock: {
          async *subscribe() {
            for (let i = 0; i < 5; i++) {
              yield { clock: new Date().toString() }
              await setTimeout$(1_000)
            }
          }
        }
      }
    }
  })
})

;(async () => {
  await app.prepare()
  const handle = app.getRequestHandler()

const server = createServer(async (req, res) => {
    try {
      const url = parse(req.url, true)

if (url.pathname.startsWith(graphqlEndpoint)) {
        await yoga(req, res)
      } else {
        await handle(req, res, url)
      }
    } catch (err) {
      console.error(`Error while handling ${req.url}`, err)
      res.writeHead(500).end()
    }
  })

const wsServer = new WebSocketServer({ server, path: graphqlEndpoint })

useServer(
    {
      execute: args => args.rootValue.execute(args),
      subscribe: args => args.rootValue.subscribe(args),
      onSubscribe: async (ctx, _id, params) => {
        const { schema, execute, subscribe, contextFactory, parse, validate } = yoga.getEnveloped({
          ...ctx,
          req: ctx.extra.request,
          socket: ctx.extra.socket,
          params
        })

const args = {
          schema,
          operationName: params.operationName,
          document: parse(params.query),
          variableValues: params.variables,
          contextValue: await contextFactory(),
          rootValue: {
            execute,
            subscribe
          }
        }

const errors = validate(args.schema, args.document)
        if (errors.length) return errors
        return args
      }
    },
    wsServer
  )

await new Promise((resolve, reject) =>
    server.listen(port, err => (err ? reject(err) : resolve()))
  )

console.log(`
> App started!
  HTTP server running on http://${hostname}:${port}
  GraphQL WebSocket server running on ws://${hostname}:${port}${graphqlEndpoint}
`)
})()

Running Next.js Permalink for this section

Now that we have the custom server implemented, you start it by running:

node server.js

You can also check a full example on our GitHub repository here