MockQL - GraphQL Mock Data Generator for VS Code
MockQL is a VS Code extension that generates realistic mock data from GraphQL schemas and operations. It helps both frontend developers and testing teams by providing realistic JSON mocks that can be used for development and testing.
Features
Two specialized working modes:
- Frontend Developer Mode: Generate JSON mocks from specific GraphQL operations (queries/mutations)
- GQL Tests Mode: Generate complete mock data for GraphQL types with test consistency
Smart type detection: Automatically scans your workspace for GraphQL files
Realistic data generation: Uses intelligent algorithms to generate contextually appropriate data
Advanced AI integration: Enhanced with context-aware prompts for generating domain-specific mock data
Comprehensive Faker.js fallback: Intelligent field name analysis generates appropriate values
Smart sample merging: Intelligently merges values from sample files for consistent mocking
Forward reference resolution: Handles complex schemas with types referenced before they're defined
Custom root type support: Intelligently detects and processes non-standard schema structures
Organized output structure: Generated mocks are saved in logically organized directories
Performance optimized: Fast parsing of large GraphQL schemas with smart caching
Supported File Types
MockQL automatically detects and processes GraphQL schemas and operations from the following file types:
.graphql
- Standard GraphQL schema definition files
.gql
- GraphQL schema and operation files
.ts
- TypeScript files containing GraphQL template literals
.tsx
- TypeScript React files containing GraphQL template literals
The extension scans these files to extract types, queries, and mutations for generating mock data.
Installation
Option 1: VS Code Marketplace (Recommended)
- Open VS Code
- Go to Extensions view (Cmd+Shift+X)
- Search for "MockQL"
- Click "Install"
Or install directly from VS Code Marketplace.
Option 2: Build from Source (for Contributors)
- Clone this repository
- Run
npm install
- Run
npm run build
- Run
npm run vsix
- Install the generated
.vsix
file through VS Code's "Install from VSIX" command
Getting Started
- Open your GraphQL project in VS Code
- Press
Cmd+Shift+P
to open the command palette
- Type "Run MockQL" and select the command (or use the default keybinding
Cmd+Shift+M
)
- Choose the mode you want to use:
- Frontend Developers: For mocking specific queries/mutations
- GQL Tests: For generating comprehensive type mocks
All generated mock files will be saved to the mockql_generated_mocks
directory at the root of your workspace.
Frontend Developer Mode
This mode helps frontend developers by generating JSON mocks for specific GraphQL operations:
- The extension scans your workspace for all GraphQL operations (queries and mutations)
- Select the operation you want to mock from the list
- The extension will suggest relevant existing mock files that may contain useful data
- A JSON file with realistic mock data will be generated and opened in the editor
GQL Tests Mode
This mode helps testing teams by generating consistent mock data for GraphQL types:
- The extension scans your workspace for all GraphQL type definitions
- Select the type you want to mock from the list
- Optionally filter types by current file for focused development
- The extension will suggest relevant existing mock files for consistency
- A JSON file with mock data for the selected type will be generated
Configuration Options
Option |
Type |
Default |
Description |
mockql.useCopilot |
Boolean |
true |
Enable/disable AI integration |
mockql.developerMode |
Boolean |
false |
Enable detailed logging for troubleshooting |
Example Configuration
Add these settings to your .vscode/settings.json
file:
{
"mockql.useCopilot": true,
"mockql.developerMode": false
}
Mock Data Generation Features
- Intelligent Similar Data Detection: MockQL scans your workspace for existing mock files to maintain consistency
- Smart Sample Merging: Combines values from multiple sample files when patterns are detected
- Enhanced Faker.js Integration: Field name and type analysis for generating realistic mock data
- AI Integration: Uses detailed, contextual prompts with type information for better results
- Comprehensive Field Analysis: Generates values based on field name, parent type, and other contextual clues
- Use file caching: The extension caches parsed schemas and generated mocks for better performance
- Limit workspace scope: If you have a large workspace, consider using multi-root workspaces
- Optimize schema files: Breaking large schema files into smaller, more focused files can improve parsing
- Batch processing: Large schemas are processed in batches to reduce memory usage
Troubleshooting
Common Issues
- No GraphQL types found: Ensure your project contains
.graphql
or .gql
files with type definitions
- Mock generation error: Check your GraphQL schema for syntax errors
- Performance issues with large schemas: Use the performance tips above or consider splitting your schema
- Enable developer mode: Set
mockql.developerMode
to true
for detailed logs
Reporting Issues
If you encounter any issues, please report them on the GitHub repository with:
- Your VS Code version
- Your MockQL extension version
- A description of the issue
- Any relevant error messages
- Include the logs if developer mode was enabled
Release Notes
See CHANGELOG.md for detailed release notes.
For detailed usage instructions and advanced features, see DETAILED_README.md.
License
This extension is licensed under the MIT License - see LICENSE.txt for details.
Acknowledgements
- GraphQL Foundation for the GraphQL specification
- Faker.js for realistic data generation
- All contributors who have helped improve this extension