v3IntegrationsCloudflare Workers
⚠️
This is the documentation for the old GraphQL Yoga version 3. 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 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 which has an agnostic HTTP handler using Fetch API’s Request and Response objects when building GraphQL powered Cloudflare Workers.

Watch Episode #48 of graphql.wtf for a quick introduction to using GraphQL Yoga with Cloudflare Workers, and KV:

Installation

Terminal
yarn add graphql
yarn add graphql-yoga

Example with regular fetch event listener

listener.mjs
import { createYoga, createSchema } from 'graphql-yoga'
 
const yoga = createYoga({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        hello: String!
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'Hello World!'
      }
    }
  })
})
 
self.addEventListener('fetch', yoga)

You can also check a full example on our GitHub repository here

Example with Modules Approach

modules.mjs
import { createYoga, createSchema } from 'graphql-yoga'
 
const yoga = createYoga({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        hello: String!
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'Hello World!'
      }
    }
  })
})
export default { fetch: yoga.fetch }

Access to environmental values (KV Namespaces etc.)

You can access your KV namespaces etc through the context.

import { createYoga, createSchema } from 'graphql-yoga'
 
interface Env {
  MY_NAMESPACE: KVNamespace
}
 
const yoga = createYoga<Env>({
  schema: createSchema({
    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: (_, __, { 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)
        }
      }
    }
  })
})
 
export default { fetch: yoga.fetch }

If you need ExecutionContext as well inside your resolvers, you can extend the context type like below;

import { createYoga } from 'graphql-yoga'
 
interface Env {
  MY_NAMESPACE: KVNamespace
}
 
const yoga = createYoga<Env & ExecutionContext>({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        hello: String!
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'Hello World!'
      }
    }
  })
})
 
export default { fetch: yoga.fetch }

You can also check a full example on our GitHub repository here

Enabling Subscriptions

In order 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.

AWS LambdaGoogle Cloud Platform