Yoga
On this page

Integration with Cloudflare Workers

GraphQL Yoga v4 documentation (superseded by v5): GraphQL Yoga provides you a cross-platform GraphQL Server. So you can easily integrate it into any platform besides Node.js.

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

npm i graphql-yoga graphql

Example with regular fetch event listener

listener.mjs
import { createSchema, createYoga } 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 { createSchema, createYoga } 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 { createSchema, createYoga } 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

For a library enabling topic-based subscriptions using GraphQL Yoga, graphql-ws, see graphql-workers-subscriptions. This library uses Durable Objects and D1 to manage the subscriptions state.

Compatibility for Server Sent Events

In order to enable Server Sent Events based subscriptions with Cloudflare Workers, make sure you have set the compatibility date in your wrangler configuration file to a date after 2022-11-30 (if that’s not possible, add compatibility flag streams_enable_constructors).

compatibility_date = "2022-11-30"

Debug Logging

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