GraphQL Studio

A Visual Studio Code extension that provides a Postman-like interface for building GraphQL queries, mutations, and subscriptions through a point-and-click interface.

Features

• 🎯 Visual Query Builder: Point-and-click interface for building GraphQL queries
• 🔍 Schema Introspection: Automatically fetch and parse GraphQL schema from any endpoint
• 👁️ Real-time Preview: See generated query as you build it
• 📝 Code Integration: Insert queries directly into your editor at cursor position
• 🧪 Query Testing: Execute queries and view responses in real-time
• 🔐 Authentication Support: Bearer tokens and API keys
• 📦 Code Export: Copy queries in multiple formats (GraphQL, Python, Java, JavaScript)
• 🔄 All Operations: Support for queries, mutations, and subscriptions

Quick Start

1. Install the Extension

   • Open VS Code
   • Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
   • Search for "GraphQL Query Builder"
   • Click Install

2. Open GraphQL Studio

   • Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
   • Type "Open GraphQL Studio"
   • Select the command

3. Build Your First Query

   • Enter your GraphQL endpoint URL
   • Configure authentication if needed
   • Click "Fetch Schema"
   • Select an operation and choose fields
   • Test or insert your query!

Usage Guide

1. Configure Endpoint

Enter your GraphQL endpoint URL in the configuration panel. For example:

• https://api.github.com/graphql
• https://countries.trevorblades.com/graphql

2. Set Up Authentication

If your API requires authentication:

Bearer Token:

• Select "Bearer Token" from the dropdown
• Enter your token

API Key:

• Select "API Key" from the dropdown
• Enter your API key
• Specify the header name (default: X-API-Key)

3. Fetch Schema

Click the "Fetch Schema" button to load all available operations (queries, mutations, subscriptions) from your GraphQL endpoint.

4. Build Your Query

1. Select an Operation: Click on any operation from the schema browser
2. Choose Fields: Check the boxes next to fields you want to include
3. Add Arguments: Fill in operation arguments if needed
4. View Preview: See your query update in real-time

5. Test or Use Your Query

• Test Query: Click "Test Query" to execute and see the response
• Insert into Editor: Click "Insert into Editor" to add the query at your cursor position
• Copy to Clipboard: Select a format (GraphQL, Python, Java, JavaScript) and copy

Code Export Formats

GraphQL

Plain GraphQL query with optional variables comment.

Python

import requests
import json

query = """
query {
  countries {
    code
    name
  }
}
"""

headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer your-token"
}

response = requests.post(
    "https://api.example.com/graphql",
    json={"query": query, "variables": {}},
    headers=headers
)

Java

HttpClient client = HttpClient.newHttpClient();
HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("https://api.example.com/graphql"))
    .header("Content-Type", "application/json")
    .header("Authorization", "Bearer your-token")
    .POST(BodyPublishers.ofString(requestBody))
    .build();

JavaScript

const headers = {
  "Content-Type": "application/json",
  "Authorization": "Bearer your-token"
};

fetch("https://api.example.com/graphql", {
  method: "POST",
  headers: headers,
  body: JSON.stringify({ query, variables })
});

Example GraphQL Endpoints

Try these public endpoints to test the extension:

• Countries API: https://countries.trevorblades.com/graphql (no auth required)
• Star Wars API: https://swapi-graphql.netlify.app/.netlify/functions/index (no auth required)
• GitHub API: https://api.github.com/graphql (requires token)

Requirements

• VS Code 1.74.0 or higher
• Node.js 18.0.0 or higher (for development)

Development

Setup

# Clone the repository
git clone https://github.com/yourusername/graphql-query-builder.git
cd graphql-query-builder

# Install dependencies
npm install

# Compile TypeScript
npm run compile

Running in Development

1. Open the project in VS Code
2. Press F5 to launch Extension Development Host
3. In the new window, open the GraphQL Query Builder

Building for Distribution

# Install vsce if not already installed
npm install -g @vscode/vsce

# Package the extension
npm run package

This creates a .vsix file that can be installed manually.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Troubleshooting

Schema Not Loading

• Verify your endpoint URL is correct
• Check that your GraphQL endpoint supports introspection
• Ensure authentication is configured correctly if required

Fields Not Appearing

• Make sure you've selected an operation from the schema browser
• Check the browser console for errors (see Debugging Guide)

Query Not Working

• Verify the query syntax in the preview
• Check that all required arguments are provided
• Ensure authentication credentials are valid

For more debugging help, see WEBVIEW_DEBUG.md and TROUBLESHOOTING.md.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by Postman's intuitive interface
• Built with VS Code Extension API
• Uses GraphQL introspection for schema discovery

Support

If you encounter any issues or have feature requests, please open an issue on GitHub.

Made with ❤️ for the GraphQL community