The GraphQL Playground is an interactive UI where you can build and test queries you want to send to the catalogue API. You can access the GraphQL Playground by opening the API URL in your web browser.
How is this different from GraphiQL?
If you are familiarized with the GraphQL world you maybe knew about GraphiQL we use GraphiQL for our GraphQL explorer but that's another alternative of run GraphQL queries and mutations in the web, there is no problem if you prefer GraphiQL to test your GraphQL queries, the GraphQL playground uses components of GraphiQL under the hood but with more features, here is a list with the additional features:.
- Query history.
- Different themes.
- Automatic schema reloading.
- Support for graphql subscriptions.
- Configuration of http headers.
- Interactive, multi-column schema documentation.
GraphlQL playgound overview
For our examples you will see the furniture API https://api.crystallize.com/furniture/catalogue. You can replace the “furniture“ identifier with your own tenant identifier.
The image below shows how you can easily write your GraphQL query in the Playground. Clicking on the play button in the middle of the screen allows you to see the the structure of the response.
Opening the "Docs" sidebar on the right hand side gives an overview of all the available queries within the catalogue API, the arguments you can provide them, and the structure of the returned data. You can refer to this section sidebar for an up-to-date reference of all the data fields and types belonging to an object.