The best GraphQL IDEs and their features

To support the growing number of developers building APIs via GraphQL, new integrated development environments (IDEs) are popping up quite literally every month. But which one is the best for you? Below, we review the best GraphQL IDEs available.

Made by the GraphQL Foundation, GraphiQL is an interactive in-browser IDE built on React. It is probably the most popular and lightweight GraphQL IDE out there.

Four main columns of information show you a list of the queries you’ve run, the query you’re currently running, the results of your query, and searchable documentation.

Strengths: Full GraphQL Support

The GraphiQL IDE supports the full GraphQL Language Spec, ranging from Queries and Mutations to Fragments and Unions.

It provides real-time syntax and error highlighting. As you type, GraphiQL gives you snippets of the schema documentation, so you know what you are adding to your query. For example, if you type openingCrawl, a tooltip will appear explaining that it is a String type and describing it as “The opening paragraphs at the beginning of this film.” If you mistype a field (like openingCrawls instead of openingCrawl), it will underline the erroneous field in red.

In addition to helpful features like automatic code completion for variables and queries, GraphiQL also keeps a running history of your queries. You can even “star” the queries to keep them at the top of your history if you use them a lot.

You can also add labels to queries.

Drawbacks: Lack of Features

Since GraphiQL is used as a jumping-off point for other GraphQL IDEs, it lacks features like custom headers. The documentation is a little frustrating to use since the window can’t be made larger than one-third of the screen. All information is packed into that one section, making it occasionally difficult to get the information you might need. Additionally, GraphiQL lacks graphql-config support and doesn’t integrate easily with HTTP server middleware.

GraphQL Playground is an IDE by Prisma built off of GraphiQL. It takes the best parts of GraphiQL and adds features and improvements, like a better query history display and more ergonomic exploration and debugging.

This GraphQL IDE’s left column shows the query you are currently running, the middle column displays query results, and the right column shows documentation.

Strengths: Enhanced Documentation and Schema Exploration

GraphQL Playground takes the documentation available in GraphiQL and greatly improves it. It’s interactive, you can view it in multiple columns, and there’s native keyboard support.

Use the “Docs” tab of the documentation column to see more details about the queries. For example, the film type in the image to the left shows the fields that make up the type. Each film has a field characters, which is an array of the person type. If you click on a field, you can expand documentation even further to get more type details.

In the “Schema” tab, you can get details of the defined schema.

GraphQL Playground’s query history works similarly to GraphiQL’s, but it has a nicer UI and functions as a pop-up rather than a permanent column.

Drawbacks: Soon to Be Combined With GraphiQL

GraphQL Playground was recently donated to the GraphQL Foundation and will be combined with GraphiQL. Since GraphQL Playground will soon be unsupported, it’s probably not worth your time to learn this IDE. That being said, you could wait for the new GraphiQL/GraphQL Playground combined IDE to come out and get to use all the new features, like customizable network options, theme and layout customization abilities, tabs, and a graphiql-explorer plugin.

Subscribe to the Retool monthly newsletter
Once a month we send out top stories (like this one) along with Retool tutorials, templates, and product releases.

(Photo courtesy of GraphQL Editor)

GraphQL Editor is an open-source GraphQL IDE that focuses heavily on schema visualization. Developers are able to define their schemas and view the blocks as they write, or they can build their schema using the blocks and have the code generated for them.

This GraphQL IDE consists of only two columns. The left column is the code editor, where you can create your queries. The right column is the visual representation of what you’re building.

Strengths: Mock Data and Fake Backend

Photo courtesy of GraphQL Editor

GraphQL Editor is integrated with GraphiQL, which means you’ve got an entire sample GraphQL dataset to work with. You even have the ability to preview queries using your frontend engine with the mock backend.

If you’re new to GraphQL and the GraphQL Editor IDE, you can take advantage of the tutorials built right into the user interface. There is also a Slack integration that gives users access to the GraphQL Editor community directly from the app.

Drawbacks: Runtime Errors

GraphQL Editor has been called out for being more buggy than the other GraphQL-focused editors. Additionally, while the visualization components make this IDE stand out, they lack some of the features you’d expect. Clicking on a section of schema code in the panel does not redirect the visualization to that element, nor does clicking on a visualization element of the schema auto-scroll the code to the proper place. This means that any time you are looking for something in code, you’ll need to search for it again in the visuals.

(Photo courtesy of Postman Learning Center)

Postman is a popular open-source IDE for working with HTTP APIs. More than 10 million developers globally use Postman regularly to develop and test APIs. While Postman is generally known as a REST client, it works with any web protocol and can easily be used as a GraphQL IDE.

Postman has two main columns. On the left is a collection of historical queries that you’ve run through the system before, “Collections” (various API requests and elements grouped together), and APIs (beta), which is where you will define or import your GraphQL schema.

The right column contains the bulk of the product and is where you type queries and view responses.

Strengths: Automatically Generated API Documentation

Postman has a number of features that make developing APIs a really great experience. One of the best is the ability to automatically generate API documentation as you create your API in real-time. It works by pulling sample requests, headers, and code snippets from your application as you work to populate your documentation.

Additionally, Postman can connect to mock servers for simulating endpoints. This allows developers to test different responses without running an actual backend (which is especially useful if your backend isn’t fully built yet).

Drawbacks: Not as Full-featured as Other IDEs

Postman is built and used primarily for REST APIs, not GraphQL. While GraphQL support in Postman has expanded in the last year or so, it isn’t as robust as other applications that are specifically aimed at supporting GraphQL.

Even compared to other API tools like Insomnia (see below), Postman’s GraphQL features are lacking. Postman has no automatic schema-fetcher built into the IDE, which means you have to manually upload it yourself. Any changes to the schema on your server mean you have to update the version in Postman or you will run into errors.

(Photo courtesy of Insomnia)

Insomnia isn’t specifically designed as a GraphQL IDE, but it has robust GraphQL support. The app allows for easy collaboration across teams with features such as multiple workspaces and easy importing and exporting for test data.

Its three columns, from left to right, show a project explorer, your queries and variables, and the response from the server.

Strengths: Robust HTTP Response Displays

GraphQL-specific features include query completion on field names and arguments, which speeds up typing out queries. Insomnia can also error check schemas in real-time.

The Insomnia editor itself has unique features, like code snippet generation to save on repetitive typing and viewing abilities that go beyond basic JSON and XML. Insomnia is configured to display HTTP response data in viewer-friendly ways. For example, HTML can be viewed as a web page.

Drawbacks: Bare Bones (Lacking in Features)

Insomnia is lacking in some of the features that more popular IDEs focused on API development have, like auto-generated documentation, and extra testing features like monitoring.

Retool is a tool for building internal tools and applications on top of your data. You start with queries, add drag and drop components like tables and buttons, and write Javascript to connect everything together. Retool’s GraphQL integration lets you query, add variables through form fields, and explore your schema.

For this IDE, most of the workable space is split into the top and bottom half of the screen. The top section is where you’ll drag-and-drop visual components for building out your tools. You can click on components to edit details (if you’re familiar with React, props) on the right side panel. The bottom half of the screen is where you can write out and configure your queries, as well as explore your schema. In the screenshot up top here, you’re seeing a fully functional Github PR dashboard using their GraphQL API.

Strengths: Easy to Build Out Frontend

Retool is great for visually working with data. Instead of building React components from scratch and having to handle state, you can drag and drop pre-built components and hook them up to queries in a central location. You can also add custom React components that can be saved and reused anywhere in your Retool apps.

Drawbacks: Lack of Features for GraphQL

Retool isn’t built specifically as a GraphQL IDE, which means that it is missing out on some of the features that other IDEs have built-in. For instance, there is no way to build out a schema using Retool. That being said, if you’re building internal tools on top of a GraphQL endpoint, Retool is for you.

If your schema is already developed and you’re building an app or debugging, your best bet is GraphiQL or GraphQL Playground (or most likely, the future combination of the two). If you’re crunched for time or need to visualize your schemas as you work with them, then GraphQL Editor or Retool is the best tool for your project. Retool is especially useful if you are working with multiple data sources.

Finally, if you’re working with REST APIs alongside GraphQL endpoints, Postman or Insomnia will come in handy as they support both. You’ll also get access to more advanced features like mock backend servers or automatically-generated API documentation (in Postman).