apollo-server-integration-next - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #llm #android #rust #macos #windows #cli #awesome-list #pytorch #mcp #open-source

apollo-server-integration-next

(★ 216)

An Apollo Server integration for use with Next.js

File Explorer

Download Latest Version (.zip)

- config.json
- huge-oranges-clean.md
- ignore-legacy-next-renovate.md
- nothing-to-release.md
- oxlint-oxfmt.md
- upgrade-node-24.md
- witty-olives-exist.md
- - check.yml
  - release.yml
- CODEOWNERS
- - integration.test.ts
- - getBody.ts
  - getHeaders.ts
  - isNextApiRequest.ts
- index.ts
- startServerAndCreateNextHandler.ts
.gitignore
.npmrc
.oxfmtrc.json
.oxlintrc.json
CHANGELOG.md
jest.config.ts
LICENSE
package-lock.json
package.json
README.md
renovate.json5
tsconfig.build.json
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/apollo-server-integrations/apollo-server-integration-next

Downloads the entire project code from GitHub to your computer.

cd apollo-server-integration-next

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# apollo-server-integration-next

An Apollo Server integration for use with Next.js.

## Versions

- If you're using Apollo Server 4.x use version 3.x
- If you're using Apollo Server 5.x use the latest version

## Getting started

First create a Next.js API route by creating a file at for example `pages/api/graphql.js`.  
This API route will be accessible at `/api/graphql`.

Next, create an Apollo Server instance and pass it to `startServerAndCreateNextHandler`:

```js
import { ApolloServer } from '@apollo/server';
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import { gql } from 'graphql-tag';

const resolvers = {
  Query: {
    hello: () => 'world',
  },
};

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

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

export default startServerAndCreateNextHandler(server);
```

You may also pass a context function to `startServerAndCreateNextHandler` as such:

```js
export default startServerAndCreateNextHandler(server, {
  context: async (req, res) => ({ req, res, user: await getLoggedInUser(req) }),
});
```

The Next.js `req` and `res` objects are passed along to the context function.

## App Router (Route Handlers)

First create a Next.js Route Handler by creating a file at for example `app/api/graphql/route.js`.  
This Route Handler will be accessible at `/api/graphql`.

Next, create an Apollo Server instance, pass it to `startServerAndCreateNextHandler` and  
finally export the handler both as GET and POST:

```js
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import { ApolloServer } from '@apollo/server';
import { gql } from 'graphql-tag';

const resolvers = {
  Query: {
    hello: () => 'world',
  },
};

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

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

const handler = startServerAndCreateNextHandler(server);

export { handler as GET, handler as POST };
```

## TypeScript

When using this integration with Route Handlers you will have to specify the type of the incoming request object (`Response` or `NextResponse`) for the context function to receive the correct type signature:

```ts
import { NextRequest } from 'next/server';

// req has the type NextRequest
const handler = startServerAndCreateNextHandler<NextRequest>(server, {
  context: async req => ({ req }),
});
```