Features of GraphQL Playground

The GraphQL Playground is based on GraphiQL. It has a lot of features with the features of GraphiQL. GraphQL has query history feature means that GraphQL queries in GraphQL Playground are kept under query history and you can view query history with the history button.

Also in GraphQL Playground you can configure query variables in query variables tab or HTTP headers in HTTP headers tab, they are placed on the bottom of the GraphQL Playground tab.

You may use multiple tabs in GraphQL Playground for GraphQL queries, even with different endpoint. Prettify settings and query history will be shared with new tabs. These tabs are like the tabs in your browser, you can visit different website in different tabs but settings will be same for each tab.

In GraphQL Playground, you can set an endpoint or copy, use prettify button to prettify your GraphQL queries, view history with history button, change the Settings property, set a query variable under the query variable tab to use the variable in the query, set HTTP headers to configure HTTP headers when you need to, show query schema and add new tab. Schema is helpful when you are writing GraphQL queries, it shows the variables as a GraphQL Schema or shows a Schema documentation, where you can display variables in detail by expanding.

The History button, as in the picture near the prettify button, is to view previous GraphQL queries. You may also view starred GraphQL queries or search a GraphQL query in your GraphQL query history other than just viewing previous GraphQL queries.

In Query Variables you can set a variable to a GraphQL query. You should add your query variable and then use it in your GraphQL query. Query Variables should be written in JSON. In HTTP Headers, you can configure the HTTP header in JSON as you need in order to make a request, like you may set cookie or send authorization with HTTP header.

You may change the GraphQL Playground settings in the Settings. You can change the editor properties, prettify properties, request properties, schema pooling properties and tracing properties. You can change editor properties such as font family or font size. You can change prettify properties to be able to view your GraphQL queries as you set up in the Settings. You can change your request properties, like its credentials. You can set request credentials to “omit” to not to send nor receive credentials, to “include” to send user credentials like cookies, to “same-origin” to send user credentials to the server URL that is on the same origin. Schema properties is for the Schema which is automatically fetched from the endpoint, that is used in the query. This is only needed when you want to override the Schema.

GraphQL Playground is a powerful GraphQL IDE which is a graphical, interactive, and in-browser, that enables development workflows and increases developer productivity. It is a form of user interface that visualizes your GraphQL queries and requests. It allows you to get data by a request to the URL you have provided, understand the response of the query you’ve written, and use many features to ease your job related to GraphQL requests other than just writing GraphQL queries. These features will be told in this article later.