Yoga
On this page

Integration with Cloudflare Workers

GraphQL Yoga v3 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
npm i graphql-yoga

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

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.