frontend/src/components/Tools/HTTPClient.tsx, frontend/src/components/Tools/GraphQLClient.tsx, frontend/src/components/Tools/graphqlAutocomplete.ts GraphQL
Body type → GraphQL on any HTTP request. Query + variables editor. Schema browser, context-aware autocomplete. Substitution, runner support, SSH-tunnel routing.
The HTTP client’s Body type → GraphQL mode gives you:
- A Query field (multi-line code editor with bracket matching)
- A Variables field (JSON)
Posts a { query, variables } envelope as application/json.
Schema browser
A left-rail panel runs __schema introspection against the endpoint on change (debounced ~600ms, cached per URL). Types render root-first, then grouped by kind, with one-click expand and a search box. If the server has introspection disabled, the panel says so honestly instead of looping.
Autocomplete
Context-aware autocomplete runs on top of the introspected schema — no external parser, no extra dependency.
- Triggers on identifier keystrokes and
{,(,:,$ - Four contexts detected by walking the buffer up to the cursor: top-level operation keywords, selection-set fields, argument lists, and type-name positions in variable declarations
- Kind badges on every row — fields (emerald), args (cyan), types (amber)
- Smart insert — fields with required arguments insert as
fieldName(, arguments insert asargName:so you stay in flow - Keyboard — ↑↓ to navigate, Tab or Enter to accept, Esc to dismiss, Ctrl+Space to force-invoke
- Filter is case-insensitive with prefix matches ranked above substring matches
The scanner tracks balanced braces and parens, line and triple-quoted strings, # comments, alias prefixes (alias: field {) and pre-brace arg lists (field(arg: $v) {), so the field-name stack stays correct in deeply nested queries.
What you get
- Saving the request into a collection
- Running it through the runner
- Environment /
{{var}}substitution in the query - SSH-tunnel routing
What’s separate
The dedicated GraphQL tab on the API rail is a scratchpad — no persistence. Use it to noodle; save into the HTTP client when you want to keep a query.