GluePuddingTool

GraphQL Subscription Builder

Visually define a GraphQL subscription's name, arguments, and return fields, and generate the subscription query plus WebSocket connection sample code — no real connection is made in the browser.

FreeOnline Tool
Loading…

How to Use

  1. Under Connection Info, fill in the GraphQL HTTP endpoint and WebSocket endpoint (leave the WS endpoint blank and it's auto-derived as wss:// from the HTTP endpoint).
  2. Under Subscription Definition, enter the operation name (e.g. onMessage) and its arguments as JSON (e.g. {"channelId":"general"}).
  3. Under Return Field Selection, click "+ Add Field" to add each field name and type you want to subscribe to. "+ Add Nested Field" inserts a sender.name-style example — use dot notation (parent.child) to express nesting.
  4. Click "Generate Query" to get a formatted GraphQL subscription document, plus two JavaScript WebSocket connection examples (one using the graphql-ws library, one using raw WebSocket with the subscriptions-transport-ws protocol).
  5. Use the "Copy" buttons to grab the query or the connection code, or click one of the three presets (Chat Message / Order Status / Notification) to load a complete worked example.

Features

  • Visually build a GraphQL subscription: operation name, JSON arguments, and any number of return fields — nested fields expressed with dot notation (e.g. sender.name).
  • Automatically reassembles the flat dot-notation field list into a properly indented nested GraphQL selection set.
  • Auto-derives a wss:// WebSocket endpoint from the HTTP endpoint (or accepts a manually specified one).
  • Generates two WebSocket connection code samples: one using the graphql-ws library (the modern graphql-transport-ws protocol) and one hand-rolled with raw WebSocket messages (connection_init / start) for the legacy subscriptions-transport-ws protocol.
  • Three built-in presets — chat messages, order status changes, notifications — each fills in a complete example with one click.
  • The page states explicitly: this tool only generates query and connection-code text; it never opens a real WebSocket connection or sends a request to the endpoint you entered.

Use Cases

Get subscription syntax right on the first try
Can't quite remember GraphQL subscription argument or nested-field syntax — fill in fields through the form instead of hand-writing braces and indentation that might not balance.
Hand front-end devs a ready-made WebSocket connection template
The backend just shipped a new subscription — generate a graphql-ws connection snippet matching its field shape and hand it straight to the front-end team as a starting point.
Compare legacy vs. modern WebSocket subprotocol code
Your GraphQL gateway needs to support both the new graphql-transport-ws and the legacy subscriptions-transport-ws protocol — generate both connection code samples at once for side-by-side implementation.
Sanity-check a subscription's field shape before building it
Designing a new subscription endpoint — enter the fields you plan to expose (including nested objects) to see the resulting query text, then align on the schema with the backend team.

FAQ

Will this tool actually connect to my GraphQL server to test the subscription?
No. It only assembles text locally in your browser based on what you fill in — it never opens a real WebSocket connection or sends any network request. The page states this explicitly.
How do I express nested fields?
Separate parent and child with a dot in the field name, e.g. sender.name and sender.avatar — the generator merges these into a nested sender { name avatar } selection automatically.
What's the difference between the two generated WebSocket code samples, and which should I use?
One uses the graphql-ws library and implements the newer graphql-transport-ws protocol — the current recommended approach. The other is dependency-free raw WebSocket code implementing the older subscriptions-transport-ws protocol, useful only if your server hasn't upgraded yet.
What happens if my arguments JSON is invalid?
The generator tries to parse whatever you type; if parsing fails it silently treats the arguments as an empty object rather than showing an error — check the arguments portion of the generated query afterward to make sure it's what you expect.