GraphQL Playground

GraphQL Playground is a powerful tool that can be used to test and check the documentation for queries, mutations, objects types, and fields.

Prerequisite
Get an API access token
If you don't have your API keys yet, follow these instructions.
How to use the GraphQL Playground 
Once access the GraphQL playground,  the following interface appears:
Follow the steps below to start using the playground:
1. Introduce the HTTP Headers
Click on the HTTP HEADERS and introduce the following provided information to add to the corresponding headers:
{
"Authorization": "Token replace_user_token" 
}
Some of the queries or mutations will require having the sg-users sent as a parameter. Use the databaseID to replace in the mentioned variable:
{
  "Authorization": "Token replace_user_token",
  "sg-user": "replace_user_id"
}
Check this section to see in which cases it is required to send either both or just one header.
2. Create the Query/Mutation
Add the query o mutation to be executed.
For instance, copy the following query and paste it on the left section of the navigator.
Query
Results
{ 
  restaurant(id: "UmVzdGF1cmFudDo1MzNhMTRjMC0zNmQ2LTQ4NWEtYmJhNC1mOTJmOTc5MWFjZTY=") {
    name
    databaseId
    country
    address1
  }
}
{
  "data": {
    "restaurant": {
      "name": "Demostaurant - Augmented Reality Demo",
      "databaseId": "533a14c0-36d6-485a-bba4-f92f9791ace6",
      "country": "USA",
      "address1": "42 Suggestic Rd"
    }
  }
}
3. Execute the query/mutation
Click on the play button or type command + return (MAC) or CTRL + return (Windows) on the keyboard to execute the query.
4. Get the results
Congratulations! you've executed your first GraphQL query, the JSON results of your query are displayed on the right-side panel of the GraphQL navigator.
Query Variables
In some cases you may want to test how to pass a variable to your query, you can do this also on the GraphQL navigator. Variables can be set on the bottom left side of the navigator.
query restaurantById($myVariable: ID!) {
  restaurant(id: $myVariable) {
    name
    country
    address1
  }
}
The execution in the GraphQL playground will be as follows:
Documentation
Given that GraphQL is a strongly typed query language, it's very easy to have documentation for object types, fields, mutation, etc. Therefore, automatically generating documentation is provided by GraphQL which can be accessed by clicking on DOCS tab located at the right side of the navigator.
The DOCS section slides to the left showing the list of queries and mutations whose documentation is available:
Click on a mutation or query to get its corresponding documentation

GraphQL - Previous

Calling GraphQL

Next - Suggestic API Reference

Last modified 8mo ago