MockQL - GraphQL Mock Data Generator for VS Code

MockQL is a powerful VS Code extension that generates realistic mock data from GraphQL schemas and operations. It is designed for both frontend and GraphQL developers, providing high-quality JSON mocks for development, testing, and prototyping.

Features

• Two specialized working modes:
  • Frontend Developer Mode: Generate JSON mocks from specific GraphQL operations (queries/mutations)
  • GraphQL Developer Mode: Generate complete mock data for GraphQL types with test consistency
• Smart type and operation detection: Scans your workspace for GraphQL schemas and operations in .graphql, .gql, .ts, and .tsx files
• AI-powered and fallback data generation: Uses AI for context-aware, domain-specific mock data, with robust fallback to Faker.js for realistic values
• Advanced caching: Efficient caching of parsed schemas, types, and operations for fast performance
• Organized output: All generated mocks are saved in a dedicated mockql_generated_mocks directory
• Performance optimized: Handles large schemas and workspaces with batch processing and smart caching
• Consistent mock data: Reuses values from similar files to maintain consistency across your project

Supported File Types

MockQL automatically detects and processes GraphQL schemas and operations from:

• .graphql / .gql — Standard GraphQL schema and operation files
• .ts / .tsx — TypeScript and React files with GraphQL template literals (e.g., gql tag)

The extension extracts types, queries, and mutations from these files for mock generation.

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 your mode:
   • 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.

Example Usage

Example GraphQL Query:

query GetUser($userId: ID!) {
  getUser(userId: $userId) {
    id
    name
    email
  }
}

Example Schema: See examples/schema.graphql for a full-featured schema example.

Frontend Developer Mode

• Scans for all GraphQL operations (queries/mutations)
• Lets you select an operation to mock
• Suggests relevant existing mock files for consistency
• Generates a JSON file with realistic mock data for the operation

GQL Tests Mode

• Scans for all GraphQL type definitions
• Lets you select a type to mock
• Suggests relevant existing mock files for consistency
• Generates a JSON file with mock data for the selected type

Configuration Options

Example Configuration

Add these settings to your .vscode/settings.json:

{
  "mockql.useAI": true,
  "mockql.developerMode": false,
  "mockql.cacheTimeout": 300
}

Mock Data Generation

• AI-Powered Generation: Uses AI for context-aware, domain-specific mock data (if enabled)
• Faker.js Fallback: If AI is disabled or unavailable, uses Faker.js for realistic values
• Consistent Data: Reuses values from similar files for consistency
• Type-Aware: Handles GraphQL types, lists, non-nulls, enums, and custom scalars

Performance Tips

• Use file caching: Caches parsed schemas and generated mocks for speed
• Limit workspace scope: For large projects, use multi-root workspaces
• Optimize schema files: Split large schemas for faster parsing
• Batch processing: Large schemas are processed in batches

Troubleshooting

• 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: Use the performance tips above or split your schema
• Enable developer mode: Set mockql.developerMode to true for detailed logs

Reporting Issues

If you encounter issues, report them on GitHub with:

• Your VS Code version
• Your MockQL extension version
• A description of the issue
• Any relevant error messages
• Logs if developer mode was enabled

Release Notes

See CHANGELOG.md for detailed release notes.

For advanced usage and technical details, 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