Graphql Mocker

GraphQL Mocker - Real-time GraphQL Response Mocking Tool for Developers

🚀 Stop waiting for backend changes. Test any GraphQL scenario instantly.

GraphQL Mocker is a powerful Chrome DevTools extension that intercepts GraphQL requests and lets you customize API responses in real-time. Perfect for frontend developers, QA engineers, and anyone working with GraphQL APIs.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🎯 WHO IS THIS FOR?

• Frontend Developers - Continue development when backend APIs are incomplete or unstable
• QA Engineers - Test error states, edge cases, and loading scenarios without complex setup
• Demo Presenters - Showcase different app states during presentations
• Full-stack Teams - Debug and validate API integrations faster

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✨ KEY FEATURES

📸 AUTO-CAPTURE
Automatically intercepts all GraphQL queries and mutations. No configuration required.

✏️ INTUITIVE JSON EDITOR
Visual tree editor with inline editing. Click any value to modify it instantly.

🎭 INSTANT MOCKING
Return custom responses for any GraphQL operation. Test null states, errors, and edge cases.

⏱️ NETWORK DELAY SIMULATION
Add response delays (0ms~) to test loading states and slow network conditions.

🔀 SMART BOOLEAN TOGGLE
Edit boolean values with convenient true/false dropdown selector.

🎚️ GLOBAL ON/OFF SWITCH
Enable or disable all mocking with a single click.

🔍 POWERFUL SEARCH
Quickly find operations and search through large JSON responses.

🪟 SEPARATE EDITOR WINDOW
Open a larger editing panel for complex data structures.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔥 USE CASES

✓ Test error handling (404, 500, validation errors)
✓ Simulate empty states and null values
✓ Test pagination with large datasets
✓ Validate loading state UI
✓ Demo specific app scenarios
✓ Debug GraphQL response issues

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📖 HOW TO USE

1. Install the extension and pin it to your toolbar
2. Navigate to any page making GraphQL requests
3. Click the extension icon to see captured operations
4. Edit any response and click "Save & Activate"
5. Refresh the page - your custom response is served!

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔒 PRIVACY FIRST

• All data stays 100% local in your browser
• No external servers or data collection
• No account required
• Works completely offline

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🆓 FREE & OPEN SOURCE

• MIT Licensed
• Contributions welcome on GitHub
• Built with React & TypeScript

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📧 SUPPORT & FEEDBACK

Found a bug or have a feature request?
→ GitHub Issues: github.com/wtdlee/graphql-mocker