https://github.com/enisdenjo/cloudflare-worker-graphql-ws-template

A template for WebSockets powered Cloudflare Worker project using graphql-ws
https://github.com/enisdenjo/cloudflare-worker-graphql-ws-template

cloudflare cloudflare-workers graphql graphql-ws websockets workers

Last synced: about 3 hours ago
JSON representation

A template for WebSockets powered Cloudflare Worker project using graphql-ws

• Host: GitHub
• URL: https://github.com/enisdenjo/cloudflare-worker-graphql-ws-template
• Owner: enisdenjo
• License: mit
• Created: 2021-06-21T11:07:59.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-02-21T22:26:08.000Z (almost 3 years ago)
• Last Synced: 2025-01-13T04:10:50.107Z (2 days ago)
• Topics: cloudflare, cloudflare-workers, graphql, graphql-ws, websockets, workers
• Language: JavaScript
• Homepage: https://graphql-ws.enisdenjo.workers.dev
• Size: 608 KB
• Stars: 39
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-list - cloudflare-worker-graphql-ws-template - ws | enisdenjo | 15 | (JavaScript)

README

        
# [🚡 `graphql-ws`](https://github.com/enisdenjo/graphql-ws) on [Cloudflare Workers](https://workers.cloudflare.com/)

A template for [WebSockets](https://developers.cloudflare.com/workers/runtime-apis/websockets) powered Cloudflare Worker project using graphql-ws.

The worker serves the following routes:

- `"/"` renders GraphiQL using only `graphql-ws` ([as showcased here](https://gist.github.com/enisdenjo/a68312878fdc4df299cb0433c60c1dea))

- `"/graphql"` serves the GraphQL over WebSocket

## Getting started

This template is meant to be used with [Wrangler](https://github.com/cloudflare/wrangler). If you are not already familiar with the tool, we recommend that you install the tool and configure it to work with your [Cloudflare account](https://dash.cloudflare.com). Documentation can be found [here](https://developers.cloudflare.com/workers/tooling/wrangler/).

To generate using Wrangler, run this command:

```bash

wrangler generate my-graphql-ws https://github.com/enisdenjo/cloudflare-worker-graphql-ws-template

```

## Gotchas

- Server WebSocket instance does not contain the `protocol` property ([as `ws` does](https://github.com/websockets/ws/blob/145480a5b520ee951d848009d51069bfd7ed928c/lib/websocket.js#L115-L120)) which is why you should pass the `Sec-WebSocket-Protocol` header to the `graphql-ws` server

- Message listener event `data` property is already a string

- If the client does not support the `"graphql-transport-ws"` subprotocol, the `Sec-WebSocket-Protocol` header will be omitted. This causes Chrome to abruptly terminate the connection with a `1006` close event code.

- `webpack.config.js` is configured to omit the `browser` entry field in `package.json`s since we are bundling for Node workers and not for browsers

  _This is especially necessary for `graphql-ws` since the `browser` bundle does NOT contain any server code._