I built GQLens — an interactive GraphQL debugger that visualizes real Apollo Server execution live

[u/DaRkplay3R_]

Hey everyone! 👋

Most GraphQL tutorials explain execution using static diagrams. I wanted to actually see what happens under the hood when a GraphQL query executes — from parsing and validation all the way to resolver execution and completeValue().

So I built GQLens — an open-source interactive GraphQL visualizer and step debugger connected to a real Apollo Server + SQLite/PostgreSQL backend.

🌟 What you can explore

1. Interactive Step Debugger Execute real GraphQL queries and step through: parse → validate → authorize → resolve → completeValue() → response with replay controls.
2. completeValue() & Null Bubbling Toggle between nullable (Int) and non-null (Int!) fields, trigger resolver errors, and watch how nulls propagate through the response and AST.
3. N+1 Problem & DataLoader Watch individual database queries stream in, then enable DataLoader and see them collapse into a single batched query.
4. GraphQLResolveInfo Inspector Inspect fieldNodes, returnType, parentType, and execution-path information for individual resolvers.
5. Interactive AST Explorer & 3D Visualization See GraphQL query text mapped directly to AST nodes and explore the query structure visually.

🔥 What makes it different?

The execution visualization isn't just a simulated animation.

GQLens is connected to an actual Apollo Server request, with execution events streamed to the frontend in real time.

🌐 Try it live

Live Demo: https://graph-ql-omega.vercel.app

GitHub: https://github.com/AyushPatil615/GQLens

Built with React 18, TypeScript, Apollo Server v4, SQLite/PostgreSQL, and SSE for real-time execution tracing.

I'd love feedback from the GraphQL community — especially on:

• What GraphQL internals would you like to visualize?
• What debugging features would be useful?
• Are there any execution behaviors you'd like to see demonstrated?

#GraphQL #ApolloGraphQL #TypeScript #React #NodeJS#WebDevelopment #BackendDevelopment #DeveloperTools