feat: add comprehensive GraphQL debug dashboard with VFS inspection #42
+806
−98
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add new debug endpoint at /_nitro/graphql/debug - Display environment, scanned files, and runtime info - Show resolver exports with color-coded type badges - Add virtual module inspection - Implement GraphQL brand colors and professional design - Support scrollable lists for large resolver counts - Add JSON API endpoint with ?format=json Features: - Color-coded resolver types (query/mutation/type/directive) - Unique symbols for each resolver type - Tailwind CSS v4 with custom scrollbars - GraphQL pink (#E535AB) brand theming - Responsive grid layouts - File path listings for schemas and documents 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add virtualModules field to debugInfo with generated code - Create expandable/collapsible details for each virtual module - Show module statistics (line count, byte size) - Add copy-to-clipboard functionality for each module - Color-code modules by type (schemas, resolvers, directives, config) - Display modules: - server-schemas (blue) - server-resolvers (GraphQL pink) - server-directives (amber) - module-config (purple) - graphql-config (emerald) Improvements: - Users can now inspect generated VFS code at runtime - Each module shows size and line count - One-click copy functionality - Scrollable code blocks with max-height - Professional color coding matching resolver types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Fix virtualModules field to use debugInfo.virtualModules (string code) - Rename runtime sample data to virtualModuleSamples - Add null check for virtualModules to prevent errors - Now displays actual generated TypeScript/JavaScript code 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add type casting for virtual module generators (as string) - Add explicit any types for import map parameters - Fix Promise<string> | string type conflicts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📊 GraphQL Debug Dashboard
Adds a new comprehensive debug dashboard at
/_nitro/graphql/debugfor inspecting GraphQL setup, resolver exports, and generated virtual modules.✨ Features
1. Color-Coded Resolver Type Badges
◆Query (blue) - Data fetching operations●Mutation (GraphQL pink) - Data modifications▲Type (purple) - Custom type resolvers@Directive (amber) - Special directives◉Resolver (emerald) - Combined resolvers↻Subscription (teal) - Real-time data2. Virtual Module Source Code Display
#nitro-internal-virtual/server-schemas#nitro-internal-virtual/server-resolvers#nitro-internal-virtual/server-directives#nitro-internal-virtual/module-config#nitro-internal-virtual/graphql-config3. GraphQL Corporate Branding
4. Comprehensive Statistics
5. Developer Experience
?format=json📸 Screenshots
See the dashboard displaying:
🔧 Technical Changes
New Files:
src/routes/debug.ts- Debug dashboard endpointModified Files:
src/index.ts- Register debug route and add startup diagnosticssrc/rollup.ts- AddvirtualDebugInfo()with generated code collectionsrc/virtual.d.ts- AddvirtualModulesfield to debug info typetsdown.config.ts- Add debug route to build entries🧪 Testing
Tested in:
📚 Related
Part of ongoing improvements to developer experience and debugging capabilities.
🤖 Generated with Claude Code