Apollo Server

An example using our GraphQL API with Apollo Server

Source Repository

Note: Using Apollo Server with Next.js for this example requires using top-level await, which is not currently supported by SWC. The example repository provides the .babelrc and next.config.js changes to enable top-level await with Babel and Webpack 5.

Quick Start

  1. Create your application using create-next-app
npx create-next-app --example your-application-name
  1. Replace Authorization header placeholder CANOPY-API-KEY in apollo/schema.ts with your API Key (found in your dashboard)
const remoteExecutor = buildHTTPExecutor({
  headers: {
    Authorization: "Bearer CANOPY-API-KEY",
  1. Start the Next.js server: npm run dev
  2. Open the GraphQL Playground at http://localhost:3000/api/graphql

GraphQL API Route Example

To add the Canopy API schema to an existing Next.js GraphQL API Route with Apollo Server, you will need to use @graphql-tools/stitch and add the Authorization header. Here is an example:

import { ApolloServer } from '@apollo/server'
import { startServerAndCreateNextHandler } from '@as-integrations/next'
import { buildHTTPExecutor } from '@graphql-tools/executor-http'
import { schemaFromExecutor } from '@graphql-tools/wrap'
import { stitchSchemas } from '@graphql-tools/stitch'


const remoteExecutor = buildHTTPExecutor({
  headers: {
    Authorization: 'Bearer CANOPY-API-KEY',

const canopySubschema = {
  schema: await schemaFromExecutor(remoteExecutor),
  executor: remoteExecutor,

const schema = stitchSchemas({
  subschemas: [canopySubschema],

const apolloServer = new ApolloServer({ schema })

export default startServerAndCreateNextHandler(apolloServer)
GraphQL Yoga