

The left column is the code editor, where you can create your queries. This GraphQL IDE consists of only two columns. 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. GraphQL Editor is an open-source GraphQL IDE that focuses heavily on schema visualization. Once a month we send out top stories (like this one) along with Retool tutorials, templates, and product releases. Subscribe to the Retool monthly newsletter 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. Since GraphQL Playground will soon be unsupported, it’s probably not worth your time to learn this IDE. GraphQL Playground was recently donated to the GraphQL Foundation and will be combined with GraphiQL. 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.ĭrawbacks: Soon to Be Combined With GraphiQL In the “Schema” tab, you can get details of the defined schema. If you click on a field, you can expand documentation even further to get more type details. Each film has a field characters, which is an array of the person type. For example, the film type in the image to the left shows the fields that make up the type. Use the “Docs” tab of the documentation column to see more details about the queries.

It’s interactive, you can view it in multiple columns, and there’s native keyboard support. GraphQL Playground takes the documentation available in GraphiQL and greatly improves it. Strengths: Enhanced Documentation and Schema Exploration 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. It takes the best parts of GraphiQL and adds features and improvements, like a better query history display and more ergonomic exploration and debugging. GraphQL Playground is an IDE by Prisma built off of GraphiQL.

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

In addition to helpful features like automatic code completion for variables and queries, GraphiQL also keeps a running history of your queries. 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. As you type, GraphiQL gives you snippets of the schema documentation, so you know what you are adding to your query. It provides real-time syntax and error highlighting.
POSTMAN GRAPHQL EXAMPLE FULL
The GraphiQL IDE supports the full GraphQL Language Spec, ranging from Queries and Mutations to Fragments and Unions. It is probably the most popular and lightweight GraphQL IDE out there.įour 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. Made by the GraphQL Foundation, GraphiQL is an interactive in-browser IDE built on React. Sidebar: Connecting Retool to a GraphQL API takes just a few minutes, and lets you to build user interfaces quickly on top of your own data. But which one is the best for you? Below, we review the best GraphQL IDEs available. To support the growing number of developers building APIs via GraphQL, new integrated development environments (IDEs) are popping up quite literally every month. And interest keeps rising, if Google Trends is anything to go by: This year, the publicly available version of GraphQL turned five! In the years since Facebook created the query language, dozens of well-known companies from Airbnb and GitHub to Lyft and Twitter have adopted the technology.
