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

{ 
  restaurant(id: "UmVzdGF1cmFudDo1MzNhMTRjMC0zNmQ2LTQ4NWEtYmJhNC1mOTJmOTc5MWFjZTY=") {
    name
    databaseId
    country
    address1
  }
}

Results

{
  "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