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

![](/files/-M_SCu-Jo4yKqA5VFNwS)

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

![](/files/-M_Xy8wdZXYr6r3OFKHq)

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

![](/files/-M_VjaDlzx8a7bUDplhb)

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

![](/files/-M_VkjjVHOhEyQ_YNfS3)

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

![](/files/-M_VozsAhOBZlpx8hMxP)

Click on a mutation or query to get its corresponding documentation

![](/files/-M_VqJY_lshx8sL0BECF)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.suggestic.com/graphql/graphql/graphql-playground.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.