Catch the highlights of GraphQLConf 2023!Click for recordings.Or check out our recap blog post.
v2
Integrations
Next.js
⚠️
This is the documentation for the old GraphQL Yoga version 2. We recommend upgrading to the latest GraphQL Yoga version 5.

Migrate to GraphQL Yoga v5

Integration with Next.js

Next.js (opens in a new tab) is a web framework that allows you to build websites very quickly and GraphQL Yoga can be integrated with Next.js easily as an API Route (opens in a new tab).

Installation

Terminal
yarn add @graphql-yoga/node graphql

Example

pages/aрi/graphql.ts
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { createServer } from '@graphql-yoga/node'
import type { NextApiRequest, NextApiResponse } from 'next'
 
export const config = {
  api: {
    // Disable body parsing (required for file uploads)
    bodyParser: false
  }
}
 
export default createServer<{
  req: NextApiRequest
  res: NextApiResponse
}>()
💡

You can also check a full example on our GitHub repository here (opens in a new tab).

NextAuth.js

NextAuth.js (opens in a new tab) is a popular solution for doing authentication within a Next.js application.

You can easily type and add the session to the GraphQL context by adjusting your GraphQL router handler to the following.

pages/aрi/graphql.ts
import { createServer } from '@graphql-yoga/node'
import type { NextApiRequest, NextApiResponse } from 'next'
import type { Session } from 'next-auth'
import { getSession } from 'next-auth/react'
 
export const config = {
  api: {
    // Disable body parsing (required for file uploads)
    bodyParser: false
  }
}
 
export default createServer<
  {
    req: NextApiRequest
    res: NextApiResponse
  },
  {
    session: Session
  }
>({
  context: async ({ req }) => {
    return {
      session: await getSession({ req })
    }
  }
})
💡

You can also check a full example on our GitHub repository here (opens in a new tab).