• v2
  • Integrations
  • Cloudflare Workers

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/common 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

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.

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: (_, __, { 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.

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.

Last updated on September 19, 2022