Warning: this blog post contains GraphiQL content.
Running a query against a GraphQL API isn’t hard. There are many different ways to do it:
Using CLI tools (like
curl)Using GUI tools (like Postman)
Writing simple scripts (with fetch requests)
Opening GraphiQL in the browser
However, each of these has some amount of overhead where you have to leave the context you are in to write and run the operation you want to test.
When designing our new dashboard for our new GraphQL Metrics, we wanted to do everything we can to make our users as productive as possible. Your GraphQL API should be right at your fingertips and our user experience should support you with the least amount of overhead possible.
Boost your productivity with an integrated GraphQL IDE
The obvious choice was to put a GraphQL IDE right at your fingertips. If you want to quickly test a query with your GraphQL API, the play button in the navigation bar will give you quick access to a GraphQL IDE at a moment’s notice:
Our Cache Purging API is also, of course, a GraphQL API. Similarly to the ever-present play button for your own GraphQL API, we put the Purging GraphQL API right at your fingertips in the “Purging” section of your dashboard:
However, you don’t always want to write a query from scratch. What if you’re looking at a query one of your users sent to your API yesterday in your GraphQL Metrics and want to repeat that? Or a purging API call you did just yesterday?
To ensure you have the least amount of overhead possible, we added a “Run” button to all the views in our dashboard that show you the complete operation, for example when looking at the details for a specific request or purge operation. In each of these cases, our embedded IDE will open up in a modal allowing you to execute the selected query with the click of a button:
The future of GraphiQL
If you’re thinking “Wow, that GraphQL IDE looks incredible! Which one is that?”, we’ve got one more trick up our sleeves. 🪄
We looked at the current state of the GraphQL IDE ecosystem and realized one popular option was in dire need of a refresh: GraphiQL — the first GraphQL IDE and the reference implementation for everything that came after it.
We weren't the only ones in the community who realized that, so we decided to jump in and help with the existing community effort to refresh GraphiQL, providing design and implementation resources to move the next major version of GraphiQL forward.
What you see in our dashboard is what GraphiQL is going to look like for everybody soon.
As part of that, the community also worked on making GraphiQL extensible. (huge shoutout to Rikki Schulte, who led a lot of the engineering efforts on this new version of GraphiQL) There is a new package, @graphiql/react, that allows anyone to integrate parts of GraphiQL into your own interfaces, just as we have done. It contains all the necessary building blocks, which are written to be easily extensible and customizable.
We’re living on the bleeding edge with the IDE we implemented for our dashboard. The new @graphiql/react package is not quite done yet, but it won’t be long until it is. Stay tuned for another blog post that goes into more depth and explains how we used this new package to build our custom IDE.
Wrapping Up
While we’re focused on announcing the rest of the changes this week, you already have access to our new dashboard today! If you’re not already a Stellate user, sign up for free and take a look at them today. (psst, Stellate is completely free for developers!)
Join the discussion in our Discord community, fasten your seatbelt and stay tuned for the next announcement coming tomorrow! 🚀