A Visual Studio Code extension that helps developers analyze GraphQL query complexity and estimate execution costs before sending queries to the server.
Features
Query Cost Analysis: Automatically calculates the cost of GraphQL queries based on field depth, list operations, and complexity.
Visual Cost Explorer: Visualizes query cost breakdown in an interactive treemap and bar chart.
Optimization Suggestions: Provides actionable recommendations to reduce query complexity and cost.
Cost Breakdown: Shows detailed cost information for each field in the query.
Integration with VS Code: Right-click on any GraphQL query file to analyze costs.
Use Cases
API Cost Optimization: Identify and optimize expensive GraphQL queries before they hit production.
API Usage Planning: Understand the server resources your queries will consume.
API Provider Pricing: Help API providers estimate and charge for query costs.
Performance Tuning: Identify bottlenecks in your GraphQL operations.
Installation
Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "GraphQL Query Cost Calculator"
Click Install
Usage
Analyzing Query Cost
Open any GraphQL query file (.graphql, .gql) or a file containing GraphQL queries
Right-click in the editor and select "Calculate GraphQL Query Cost"
Alternatively, use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and select "Calculate GraphQL Query Cost"
The cost analysis will appear in the GraphQL Cost Explorer view in the Explorer sidebar
Viewing Detailed Cost Analysis
After calculating query cost, click on "Show GraphQL Cost Explorer" in the notification
Alternatively, use the Command Palette and select "Show GraphQL Cost Explorer"
The detailed cost visualization will open in a new tab, showing:
Total cost and complexity
Cost breakdown by field
Cost distribution treemap
Optimization suggestions
Configuration
You can customize the extension's behavior in VS Code settings: