IDE For GraphQL
GraphQL is a query language for APIs. GraphQL has some advantages that make it popular. The most important of these is that more than one field can be queried in a single request and it allows users to get the data they want in the responses.
In this article, we will talk a little about what IDEs we can use to view GraphQL diagrams and create queries.
Let’s start if you’re ready.
GraphiQL
Provides a tabbed interface for editing and testing GraphQL queries/mutations with GraphiQL. Electron-based wrapper around GraphiQL.
Installation
macOS
brew cask install graphiql
Windows
To install GraphiQL App on Windows go to Electron, where you can find a windows installer.
Different queries or mutations can be called with more than one tab. In addition, headers can be added easily with Edit HTTP Headers.
Previous queries can be viewed in tab-specific via clicking the History button and queries are automatically formatted with the Prettify.
GraphQL Playground
GraphQL Playground advertises itself as a more powerful IDE using GraphiQL in the background.
It also lists the following as additional features to GraphiQL:
- Interactive, multi-column schema documentation
- Automatic schema reloading
- Support for GraphQL Subscriptions
- Query history
- Configuration of HTTP headers
- Tabs
- Installation
Installation
macOS
brew cask install graphql-playground
Windows
If you’re using Windows, you can find here.
The interface of GraphQL Playground’s desktop app and its usage is similar to GraphiQL.
Documents can be viewed in the same manner. Even better, nested columns can be listed together in separate columns in GraphQL Playground, while you have to go back in the tabs in GraphiQL in order to view them.
As another additional feature, Schemas can be viewed and downloaded in JSON and SDL formats.
In addition, the same operations can be performed on “/playground” in the browser.
Also, you can share your GraphQL queries (including endpoints & configuration) with others by sending them a GraphQL Bin link.
https://legacy.graphqlbin.com/new
Postman
Postman can also be given as an alternative.
Postman can be used by importing a GraphQL schema. In order to import a schema;
- Under the API tab, click Create New API and select the Schema Type as “GraphQL”, enter the name and version information to create.
- Then the schema is added to the Define tab and saved.
- Thus, when a new request is created and when GraphQL is selected in the Body section, the schema created will be listed under the Schema tab. When the created schema is selected, Postman suggests queries/mutations and parameters.
You can find more about Postman GraphQL support here.
Sources of help;
