GraphQL Explorer Pro

GraphQL Explorer Pro is a VS Code extension for browsing GraphQL schemas, building operations from a checkbox tree, previewing variables-based queries, running requests, and visualizing schema relationships without leaving the editor.

It works with VS Code-compatible editors such as VS Code, Cursor, and Windsurf.

Visual Guide

Use this screenshot as the reference layout for the extension workspace: the connection manager and schema explorer live in the Activity Bar, while selected operations open a live query preview in the editor area.

What You Can Do

• Manage multiple GraphQL connections from the Activity Bar.
• Store auth secrets with VS Code secret storage.
• Load schemas from a live endpoint, introspection JSON, or SDL file.
• Browse queries, mutations, subscriptions, object fields, arguments, enums, interfaces, and unions.
• Select fields with native tree checkboxes and generate a live query preview.
• Edit argument values and run the generated operation against the active connection.
• Copy generated queries and variables.
• Search the loaded schema with a fuzzy quick pick.
• Mark operations as favorites.
• Compare the active schema with a saved .graphql, .gql, or .json schema file.
• View schema relationships and copy Mermaid diagram source.
• Index graphql-ruby projects and jump from schema tree nodes to Ruby source.
• Import and export saved GraphQL collections as JSON.

Quick Start

1. Add A Connection

1. Open the GraphQL Explorer Pro icon in the Activity Bar.
2. In Connections, click the + button or run GraphQL Explorer: Add Connection.
3. Enter a name, endpoint URL, authentication type, and SSL preference.
4. Right-click the connection and choose Test Connection.
5. Click the check icon or run Set Active Connection to make it active.

Example public endpoint:

https://countries.trevorblades.com/graphql

Use auth type None for that endpoint.

2. Load The Schema

After setting an active connection, the extension reloads the schema automatically. You can also run:

GraphQL Explorer: Reload Schema

The GraphQL Schema Explorer view will populate with schema operations and types.

3. Build A Query

1. Select a query, mutation, or subscription in GraphQL Schema Explorer.
2. The Query Preview webview opens automatically.
3. Check fields in the tree to add them to the operation.
4. Click argument nodes to enter argument values.
5. Use the preview toolbar to copy the query, copy variables, open the formatted query in an editor, or run the operation.

When you enter argument values, the preview generates variable definitions and a JSON variables object. For example, an argument value of "US" becomes a GraphQL variable rather than being inlined into the operation.

4. Run The Operation

The preview panel runs operations against the active connection. Results appear in the GraphQL Result output channel.

If no active connection is selected, query execution will fail even if a schema was loaded from a local file.

Loading Schemas

GraphQL Explorer Pro prefers the active connection when one is selected. If no active connection exists, it falls back to extension settings.

Live Endpoint

Set graphqlExplorer.endpoint in VS Code settings, or use the connection manager. Endpoint loading uses GraphQL introspection.

Optional setting:

{
  "graphqlExplorer.endpoint": "https://api.example.com/graphql",
  "graphqlExplorer.headers": {
    "Authorization": "Bearer TOKEN"
  }
}

Local Schema File

Set graphqlExplorer.schemaFile to a workspace-relative or absolute path.

Supported formats:

• .graphql
• .gql
• .json introspection result

Example:

{
  "graphqlExplorer.schemaFile": "schema.graphql"
}

Connections And Auth

Connections are shown in the Connections sidebar view. The active connection is marked with a filled indicator.

Supported auth types:

• None
• Bearer Token, sent as Authorization: Bearer <token>
• API Key, sent as x-api-key: <key>
• Basic Auth, sent as Authorization: Basic <base64>
• Cookie, sent as Cookie: <value>
• Custom Header, entered as JSON such as {"X-Tenant-Id":"abc"}

Connection metadata is stored in VS Code global state. Auth tokens are stored with context.secrets.

Endpoints, headers, and tokens support Postman-style variables:

{{base_url}}/graphql
Bearer {{token}}

The current connection model includes a variables object, but the UI currently focuses on endpoint, auth, and SSL setup.

SSL Certificates

Each connection asks whether to verify SSL certificates strictly or trust a self-signed certificate.

Use strict verification for public and production APIs. Use the self-signed option for local or private development servers only.

If a reload hits a certificate error, the extension can prompt you to trust that certificate for the connection and retry.

Schema Explorer

The schema tree supports these common actions:

• Select an operation to open the live query preview.
• Check fields to include them in the generated operation.
• Edit argument values from argument nodes.
• Open the query builder from operation nodes.
• Toggle operation favorites.
• Search the loaded schema from the view title.
• Reload the schema from the view title.
• Open the relationship graph from the view title.
• Compare schemas from the view overflow menu.
• Go to Ruby source from operation, field, and argument nodes in Rails projects.

Relationship Graph

Run:

GraphQL Explorer: Open Relationship Graph

The graph view is generated from the active schema. It shows relationships between object, interface, and union types and includes an option to copy Mermaid diagram source.

Schema Diff

Run:

GraphQL Explorer: Compare Schemas

Choose an older .graphql, .gql, or introspection .json file. The extension compares it with the active schema and opens a diff panel.

Rails GraphQL Source Navigation

When a workspace contains a graphql-ruby codebase, the extension scans Ruby files in the background and records source locations for GraphQL types and fields.

To use it:

1. Open the Rails project workspace.
2. Load or browse the GraphQL schema.
3. Right-click an operation, field, or argument node.
4. Choose Go to Ruby Source.

If a source location is found, the Ruby file opens at the matching line.

Collections

Use the Connections view title actions or Command Palette:

GraphQL Explorer: Import Collection
GraphQL Explorer: Export Collection

Collections are stored as JSON arrays. Export writes the saved collections to a .json file; import reads a compatible JSON file and stores any valid collections.

Settings

Commands

Command Palette commands:

• GraphQL Explorer: Add Connection
• GraphQL Explorer: Delete Connection
• GraphQL Explorer: Edit Connection
• GraphQL Explorer: Set Active Connection
• GraphQL Explorer: Test Connection
• GraphQL Explorer: Configure Endpoint
• GraphQL Explorer: Reload Schema
• GraphQL Explorer: Search Schema
• GraphQL Explorer: Open Query Builder
• GraphQL Explorer: Generate Query
• GraphQL Explorer: Copy Query
• GraphQL Explorer: Open Relationship Graph
• GraphQL Explorer: Compare Schemas
• GraphQL Explorer: Toggle Favorite
• GraphQL Explorer: Go to Ruby Source
• GraphQL Explorer: Import Collection
• GraphQL Explorer: Export Collection
• GraphQL Explorer: Explain Query
• GraphQL Explorer: Optimize Query

Query execution is currently available from the Query Preview toolbar. Explain Query and Optimize Query are placeholder commands; they show an informational message and do not call an AI service yet.

Verifying Open VSX namespace claim #11001