GraphQL Subscription Builder — Generate WebSocket Payloads and Client Queries

Build GraphQL subscription query strings and generate WebSocket connection code snippets for Apollo Client, urql, and graphql-ws. Define your operation name, variables, and selection fields visually, then copy the ready-to-use code.

API ToolsAPI & Backend
Loading tool...

How to Use GraphQL Subscription Builder — Generate WebSocket Payloads and Client Queries

How to Use the GraphQL Subscription Builder:

  1. Load an Example: Click one of the preset buttons (Chat Messages, Order Updates, Live Notifications, Stock Prices) to populate the form with a working example.

  2. Set Operation Name: Enter the GraphQL operation name (e.g. OnMessageAdded). This appears after the subscription keyword and is used for debugging and DevTools.

  3. Set Subscription Field: Enter the root subscription field name as defined in your GraphQL schema (e.g. messageAdded). This is the field your server exposes under the Subscription type.

  4. Set WebSocket URL: Enter your GraphQL WebSocket endpoint (e.g. wss://api.example.com/graphql). This is used in the generated client setup code.

  5. Add Variables: Click "Add Variable" to define subscription arguments. Enter the variable name, GraphQL type (ID, String, Int, Float, Boolean, or a custom type), and check "Req" if the variable is required (adds ! to the type).

  6. Define Selection Fields: Type the fields you want to receive in the subscription payload, one per line. Indent nested fields with spaces to represent selection sets (e.g. author { id name }).

  7. Choose a Client Library: Select Apollo Client, urql, or graphql-ws from the tabs in the Client Code panel.

  8. Click Generate: The builder produces the formatted GraphQL subscription document and the corresponding TypeScript/JSX setup code for your chosen library.

  9. Copy and Use: Use the Copy buttons to copy the query or client code directly into your project.

Frequently Asked Questions

Most Viewed Tools

📺

Screen Size Converter — Diagonal Dimension Tool

5,834 views

Calculate screen width and height from diagonal size and aspect ratio. Convert between inches and centimeters for displays, TVs, and monitors with instant dimension calculations.

Use Tool →
🖨️

DPI Calculator — Print Resolution Tool

3,802 views

Calculate DPI (dots per inch), image dimensions, and print sizes. Convert between pixels and physical dimensions for printing and displays.

Use Tool →
🔐

TOTP Code Generator — 2FA Testing Tool

3,599 views

Generate time-based one-time passwords from a TOTP secret key. Enter your base32 secret, choose a period and digit length, and get the current and next codes with a live countdown timer. Useful for testing and debugging 2FA integrations.

Use Tool →
{}

JSONL Formatter — Line-by-Line Validator

3,596 views

Format, validate, and inspect JSON Lines (JSONL) and NDJSON files. Validates each line individually, reports parse errors by line number, outputs compact JSONL or a pretty-print preview, and lets you download the cleaned file.

Use Tool →
{ }

JSON to Zod — Schema Generator

3,483 views

Generate Zod validation schema code from a JSON sample object. Infers z.string(), z.number(), z.boolean(), z.array(), z.object(), and z.null() types automatically. Handles nested objects, arrays of objects with optional field detection, and outputs copy-ready TypeScript with import and z.infer type alias.

Use Tool →
🔑

Password Entropy Calculator — Crack Time Estimator

3,281 views

Calculate the information-theoretic bit entropy of any password or API key. Detects character set pools automatically, shows the total number of possible combinations, and estimates crack time across five attack scenarios from rate-limited web logins to GPU cracking clusters.

Use Tool →
🔐

TLS Cipher Suite Checker — Strength Analyzer

3,277 views

Check TLS protocol version compatibility and cipher suite strength ratings against current best practices. Supports IANA and OpenSSL cipher names — rates each suite as Strong, Weak, or Deprecated and explains why.

Use Tool →
🔍

Secret Scanner — API Key & Credential Detector

3,011 views

Scan pasted text, code, or config files for accidentally exposed API keys, tokens, passwords, and private keys. Detects 50+ secret types across AWS, GitHub, Stripe, OpenAI, and more — all client-side, nothing leaves your browser.

Use Tool →

Related API & Backend Tools

📝

REST Endpoint Documenter — Markdown Doc Generator

Document a REST endpoint quickly by entering the URL, method, headers, and sample request/response. Generates formatted Markdown documentation and an example cURL command instantly.

Use Tool →
🔍

API Error Decoder — Fix Suggestion Tool

Decode HTTP status codes and OAuth 2.0 error strings with plain-English descriptions, common causes, and actionable fix suggestions. Covers every HTTP 1xx–5xx status code and all standard OAuth 2.0 error responses. Results appear instantly as you type.

Use Tool →
⏱️

API Latency Budget Calculator — Plan Distributed System Performance

Set a P99 SLO latency target and distribute the budget across your upstream service dependencies. See remaining headroom, utilization percentage, a stacked allocation bar, and a per-service breakdown with optional P99 actual measurements.

Use Tool →

GraphQL Query Formatter — Mutation & Subscription Tool

Format and prettify GraphQL queries, mutations, subscriptions, and fragments with correct indentation.

Use Tool →
🐇

AMQP Exchange Configuration Simulator — Map Routing Keys and Queue Bindings

Generate RabbitMQ channel declaration code for Node.js (amqplib) and Python (pika). Select an exchange type, configure durability and options, add queue bindings with routing keys, and instantly get production-ready assertExchange and bindQueue calls. Supports all four exchange types: direct, fanout, topic, and headers. Four presets cover the most common RabbitMQ patterns. Free and runs entirely in your browser.

Use Tool →
🔧

HTTP Headers Generator — Auth & Security Builder

Generate common HTTP request headers for authentication, content-type, caching, and security. Toggle each category, configure values, and copy the output as raw key-value pairs, JSON, fetch(), cURL, or axios.

Use Tool →
🔀

CORS Header Generator — Cross-Origin Config Tool

Build CORS configuration headers interactively for web servers and APIs. Set allowed origins, methods, request headers, credentials, and preflight cache duration — then copy the generated Access-Control headers or ready-to-paste code snippets for nginx, Express.js, Flask, and .NET.

Use Tool →
🔐

OAuth Token Validator — JWT & OIDC Decoder

Validate and inspect OAuth tokens in your browser. Decode JWT access tokens and ID tokens to view claims, scopes, and expiry. Analyse opaque tokens for entropy and format. Free and private.

Use Tool →

Share Your Feedback

Help us improve this tool by sharing your experience

We will only use this to follow up on your feedback