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)

1. Open VS Code
2. Go to Extensions view (Cmd+Shift+X)
3. Search for "MockQL"
4. Click "Install"

Or install directly from VS Code Marketplace.

Option 2: Build from Source (for Contributors)

1. Clone this repository
2. Run npm install
3. Run npm run build
4. Run npm run vsix
5. Install the generated .vsix file through VS Code's "Install from VSIX" command

Getting Started

1. Open your GraphQL project in VS Code
2. Press Cmd+Shift+P to open the command palette
3. Type "Run MockQL" and select the command (or use the default keybinding Cmd+Shift+M)
4. 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:

1. The extension scans your workspace for all GraphQL operations (queries and mutations)
2. Select the operation you want to mock from the list
3. The extension will suggest relevant existing mock files that may contain useful data
4. 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:

1. The extension scans your workspace for all GraphQL type definitions
2. Select the type you want to mock from the list
3. Optionally filter types by current file for focused development
4. The extension will suggest relevant existing mock files for consistency
5. A JSON file with mock data for the selected type will be generated

Configuration Options

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

Performance Tips

1. Use file caching: The extension caches parsed schemas and generated mocks for better performance
2. Limit workspace scope: If you have a large workspace, consider using multi-root workspaces
3. Optimize schema files: Breaking large schema files into smaller, more focused files can improve parsing
4. 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:

1. Your VS Code version
2. Your MockQL extension version
3. A description of the issue
4. Any relevant error messages
5. 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