Announcing GraphQL Network Inspector
Explore our services and get in touch.
GraphQL Network Inspector is a dedicated devtools extension which allows you to inspect and debug GraphQL queries and mutations from network traffic.
The extension has seen great adoption since its initial release and now I'm excited to announce it's new home as part of The Guild.
You can check out the open source extension and try it out today. GraphQL Network Inspector (opens in a new tab)
Why GraphQL Network Inspector?
If you've ever worked with GraphQL on the client, you'll know that it can be a real pain to debug using the standard network tab. The standard devtools are designed for REST APIs and don't provide clear visibility into the individual GraphQL queries and mutations being sent.
With every request you'll see
POST /graphql. This makes it difficult to distinguish requests
without opening the request details and inspecting the body.
GraphQL Network Inspector solves this problem by providing a dedicated tab for GraphQL requests and displaying each query in a readable format.
The great thing about a dedicated inspector is we can provide much more specific functionality around GraphQL. Here are some of the features we've added to the extension:
The request overview tab provides a simple overview of all queries and mutations. Here you can see queries by name, distinguish between queries and mutations and even see total errors returned for each request.
Clicking into a request will show similar details to the standard inspector. But here we have a better breakdown for each element of the request including; headers, request query with variables and response.
Copy Details to GraphQL Playground
The extension also provides convenient buttons to copy the request query and variables into GraphQL Playground, great if you want to re-run the query.
Under the request details tab, you'll see a button to copy the query and variables to the clipboard.
You can also click individual headers to copy them as well.
Streamlining the debugging process is a key goal of the extension. On top of the features above we've also introduces helpful extras such as full-text search and filtering.
Check out the extension today and don't forget to give GraphQL Network Inspector (opens in a new tab) a star ⭐️ on GitHub.
We'd love to hear your feedback and suggestions for the extension. How would you like to see it integrate further with The Guild ecosystem? Let us know.
Join our newsletter
Want to hear from us when there's something new? Sign up and stay up to date!
On-Demand Shared GraphQL Subscriptions with RxJS
Trigger on-demand expensive subscriptions and share results between multiple subscribers
GraphQXL - The Missing GraphQL Language Extension?
GraphQXL, a new language for building big and scalable GraphQL server-side schemas
Build realtime GraphQL backends with Grafbase
Build collaborative, multiplayer apps faster and easier than ever with GraphQL Live Queries using Grafbase.
Brick - A New, Offline GraphQL Client Based on SQLite in Flutter
Brick is an open source package that provides offline support for GraphQL in Flutter