# GraphQL Playground

### Prerequisite

#### Get an API access token

If you don't have your API keys yet, follow [these instructions](https://docs.suggestic.com/graphql/start-here/getting-started#before-you-start).

### How to use the GraphQL Playground 

Once access the [GraphQL](https://production.suggestic.com/graphql) playground,  the following interface appears:

Follow the steps below to start using the playground:

![](https://920729701-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwqSnBDpAb6mFZYLsuB%2F-M_SBarMfKF7tp4PTtXc%2F-M_SCu-Jo4yKqA5VFNwS%2Fimage.png?alt=media\&token=5b4c6e97-0b42-4f33-a583-cba6a6773d28)

#### 1. Introduce the HTTP Headers

Click on the **HTTP HEADERS** and introduce the following provided information to add to the corresponding headers:

```graphql
{
"Authorization": "Token replace_user_token" 
}
```

Some of the queries or mutations will require having the `sg-users` sent as a parameter. Use the [`databaseID` ](https://docs.suggestic.com/graphql/objects/common/user)to replace in the mentioned variable:

```graphql
{
  "Authorization": "Token replace_user_token",
  "sg-user": "replace_user_id"
}
```

Check [this section](https://docs.suggestic.com/graphql/start-here/getting-started#additional-information) 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.

{% tabs %}
{% tab title="Query" %}

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

{% endtab %}

{% tab title="Results" %}

```graphql
{
  "data": {
    "restaurant": {
      "name": "Demostaurant - Augmented Reality Demo",
      "databaseId": "533a14c0-36d6-485a-bba4-f92f9791ace6",
      "country": "USA",
      "address1": "42 Suggestic Rd"
    }
  }
}
```

{% endtab %}
{% endtabs %}

#### 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.

![](https://920729701-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwqSnBDpAb6mFZYLsuB%2F-M_XxpM5wcHHGEHaPEav%2F-M_Xy8wdZXYr6r3OFKHq%2Fimage.png?alt=media\&token=92733f1a-84ff-4dfa-828b-f56ab51e3553)

**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.

```graphql
query restaurantById($myVariable: ID!) {
  restaurant(id: $myVariable) {
    name
    country
    address1
  }
}
```

The execution in the GraphQL playground will be as follows:

![](https://920729701-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwqSnBDpAb6mFZYLsuB%2F-M_SFJTCQhkWIrSoh9Dx%2F-M_VjaDlzx8a7bUDplhb%2Fimage.png?alt=media\&token=91bcbd06-a93b-4885-899f-1f273f975cf7)

### 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.

![](https://920729701-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwqSnBDpAb6mFZYLsuB%2F-M_SFJTCQhkWIrSoh9Dx%2F-M_VkjjVHOhEyQ_YNfS3%2Fimage.png?alt=media\&token=51ecd74b-1afd-4e91-b628-2e9526afae3a)

The DOCS section slides to the left showing the list of queries and mutations whose documentation is available:

![](https://920729701-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwqSnBDpAb6mFZYLsuB%2F-M_SFJTCQhkWIrSoh9Dx%2F-M_VozsAhOBZlpx8hMxP%2Fimage.png?alt=media\&token=a7948d6d-fe20-4ed3-9c52-b6eb8451ed83)

Click on a mutation or query to get its corresponding documentation

![](https://920729701-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwqSnBDpAb6mFZYLsuB%2F-M_SFJTCQhkWIrSoh9Dx%2F-M_VqJY_lshx8sL0BECF%2Fimage.png?alt=media\&token=795f40bf-b14b-4060-b934-3599a7336de9)