@as-integrations/h3 NPM

Apollo Server integration for h3 and nuxt

This package allows you to easily integrate Apollo Server with your h3 or Nuxt 3 application.

For defining a GraphQL server in Nuxt 3, you may want to have a look at the GraphQL server toolkit Nuxt module.

Installation

# npm
npm install @apollo/server graphql @as-integrations/h3

# yarn
yarn add @apollo/server graphql @as-integrations/h3

# pnpm
pnpm add @apollo/server graphql @as-integrations/h3

Usage with Nuxt v3

Create a Server API Route that configures an instance of Apollo Server as described in the documentation and then exports it as the event handler:

import { ApolloServer } from '@apollo/server'
import { startServerAndCreateH3Handler } from '@as-integrations/h3'

const apollo = new ApolloServer({
  // Specify server options like schema and resolvers here
})

export default startServerAndCreateH3Handler(apollo, {
  // Optional: Specify context
  context: (event) => {
    /*...*/
  },
})

Usage with h3

Create and configure an instance of Apollo Server as described in the documentation and then register it as a route handler in your h3 application.

import { createApp } from 'h3'
import { ApolloServer } from '@apollo/server'
import { startServerAndCreateH3Handler } from '@as-integrations/h3'

const apollo = new ApolloServer({
  // Specify server options like schema and resolvers here
})

export const app = createApp()
app.use(
  '/api',
  startServerAndCreateH3Handler(apollo, {
    // Optional: Specify context
    context: (event) => {
      /*...*/
    },
  }),
)

Then run your h3 server as usual, e.g. with npx --yes listhen -w --open ./app.ts. Visit http://localhost:3000/api in your browser to access the Apollo Sandbox.

Subscriptions with WebSockets

This package also supports subscriptions over WebSockets. To enable this feature, you need to install the graphql-ws package:

# npm
npm install graphql-ws

# yarn
yarn add graphql-ws

# pnpm
pnpm add graphql-ws

Then you can add a WebSocket handler to your h3 app using the defineGraphqlWebSocketHandler or defineGraphqlWebSocket functions from this package. Here is an example that combines the HTTP and WebSocket handlers in a single app.

import { createApp } from 'h3'
import { ApolloServer } from '@apollo/server'
import { startServerAndCreateH3Handler } from '@as-integrations/h3'
import { defineGraphqlWebSocketHandler } from '@as-integrations/h3/websocket'
import { makeExecutableSchema } from '@graphql-tools/schema'

// Define your schema and resolvers
const typeDefs = `...`
const resolvers = {
  /*...*/
}
const schema = makeExecutableSchema({ typeDefs, resolvers })

const apollo = new ApolloServer({ schema })

export const app = createApp()
app.use(
  '/api',
  startServerAndCreateH3Handler(apollo, {
    websocket: defineGraphqlWebSocketHandler({ schema }),
  }),
)

Then you can connect to the WebSocket endpoint using the Apollo Sandbox or any other client that supports the graphql-ws protocol.

See the WebSocket example for a complete example.

💻 Development

Clone this repository
Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10).
Install dependencies using pnpm install.
Run tests using pnpm test and integration tests via pnpm test:integration.