Catch the highlights of GraphQLConf 2023!Click for recordings.Or check out our recap blog post.
v2
Integrations
Cloudflare Workers
⚠️
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 Cloudflare Workers

GraphQL Yoga provides you a cross-platform GraphQL Server. So you can easily integrate it into any platform besides Node.js.

Cloudflare Workers (opens in a new tab) provides a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.

You will want to use the package @graphql-yoga/common which has an agnostic HTTP handler using Fetch API (opens in a new tab)'s Request (opens in a new tab) and Response (opens in a new tab) objects when building GraphQL powered Cloudflare Workers.

💡

Watch Episode #48 of graphql.wtf (opens in a new tab) for a quick introduction to using GraphQL Yoga with Cloudflare Workers, and KV:

Installation

Terminal
yarn add @graphql-yoga/common graphql

Example with Regular fetch Event Listener

listener.mjs
import { createServer } from '@graphql-yoga/common'
 
const server = createServer()
 
server.start()
💡

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

Example with Modules Approach

modules.mjs
import { createServer } from '@graphql-yoga/common'
 
export default createServer()

Access to environmental values (KV Namespaces etc.)

You can access your KV namespaces etc. through the context.

import { createServer } from '@graphql-yoga/common'
 
interface Env {
  MY_NAMESPACE: KVNamespace
}
 
export default createServer<Env>({
  typeDefs: /* GraphQL */ `
    type Query {
      todo(id: ID!): String
      todos: [String]
    }
    type Mutation {
      createTodo(id: ID!, text: String!): String
      deleteTodo(id: ID!): String
    }
  `,
  resolvers: {
    Query: {
      todo: (_, { id }, { MY_NAMESPACE }) => MY_NAMESPACE.get(id),
      todos: (_, _2, { MY_NAMESPACE }) => MY_NAMESPACE.list()
    },
    Mutation: {
      // MY_NAMESPACE is available as a GraphQL context
      createTodo(_, { id, text }, context) {
        return context.MY_NAMESPACE.put(id, text)
      },
      deleteTodo(_, { id }, context) {
        return context.MY_NAMESPACE.delete(id)
      }
    }
  }
})

If you need ExecutionContext as well inside your resolvers, you can set the context on your GraphQL server similar to what you see here:

import { createServer } from '@graphql-yoga/common'
 
interface Env {
  MY_NAMESPACE: KVNamespace
}
 
const yoga = createServer<{ env: Env; ctx: ExecutionContext }>()
 
export default {
  fetch(request: Request, env: Env, ctx: ExecutionContext) {
    return yoga.handleRequest(request, { env, ctx })
  }
}
💡

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

Enabling Subscriptions

To enable Server-Sent Events based subscriptions with Cloudflare Workers, you should add a compatibility flag in your wrangler configuration file like below:

compatibility_flags = ["streams_enable_constructors"]

Debug Logging

You should expose DEBUG variable in your environment to enable more verbose logging from GraphQL Yoga application.