# GraphQL Playground

With the GraphQL query language, you will be able to limit the amount of data transferred to and from your Heartcore instance and the client by specifying exactly what kind of information you would like to get in your API calls.

You can test and build GraphQL queries directly in the backoffice-integrated GraphQL Playground.

In the Settings section in the Umbraco Backoffice, you will find the Headless tree. From there you can use the GraphQL Playground to test your queries against your project's schema.

The Playground comes with basic features such as real-time error highlighting, syntax highlighting, formatting, query history and more.

## Accessing GraphQL Playground

1. Log into the project backoffice
2. Navigate to the Settings dashboard
3. Find the Headless tree near the bottom of the navigation list
4. Click on GraphQL

![Where to find GraphQL](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-3e2e9fb021815161055e532b9e8967605071d846%2Fwhere-to-find-graphql-playground.png?alt=media)

From there, you can start querying as soon as your content is published.

## Features

### Documentation & Schema

The GraphQL Playground's build-in documentation and schema browser can be found on the left toolbar

This button will open a panel that grants you a quick overview of how content is structured using the Document Types in your solution.

It also gives an idea of how to access specific properties on each Document Type, nested properties, and properties from compositions.

At the same time, it also explains relationships between specific objects and properties in your solution.

This will be updated automatically as you change the project's schema meaning Document Types, Data Types, Document Type Compositions, and Document Type Elements.

![Documentation and schema pane in the Playground](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-cd5cb1a3997c17ba149251e72fa6d0b45d61b6b3%2Fschema-helper.png?alt=media)

## Running GraphQL queries

To run a query use the left side of the GraphQL Playground to type in your query - could be something as basic as getting the names of all your content pages:

```graphql
{
  allContent {
    items {
      name
    }
  }
}
```

To learn more about querying, visit our [API documentation for GraphQL](https://docs.umbraco.com/umbraco-heartcore/api-documentation/graphql).

{% hint style="info" %}
The Heartcore GraphQL endpoint only supports queries - other operation types, that is mutations and subscriptions, are not supported.
{% endhint %}

After that, press the "Play" button sitting in the center of the Playground. If the query is constructed correctly, the results will be loaded into the right section.

![Sample query in the Playground](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-bd5fa2f17f7ae5d44b98c5ccbf571b8d0d1877ed%2Fsample-query.png?alt=media)

When you are satisfied with the result, you can copy the client URL (CURL) by clicking the `COPY CURL` button located in the top part of the Playground, next to the address bar.

## Sending HTTP headers

GraphQL Playground supports requests with HTTP headers if an authorization token is needed. The `HTTP HEADERS` section can be accessed from the bottom-right corner of the Playground window. By default, it contains the `umb-project-alias` header, the alias of your Heartcore project. It is possible to add multiple headers.

## Query variables

It is also possible to define variables for queries - such variables's values can be changed in the bottom-left corner of the Playground window, next to the `HTTP HEADERS` section.

![Sample query with variables in the Playground](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-a242826fc8591395d4cc07fdf6143f9d4c6b8569%2Fquery-variables.png?alt=media)

## History

If you happen to make an amazing query and afterward erase it by accident, you can re-use it by finding it in the History.

The History pane can be opened by clicking the history button in the toolbar to the left.

![Shows where the history button is](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-90713d72a83fc0f5d317ecb00a1b689988dd3ebd%2Fquery-history.png?alt=media)

## Prettify

The Playground gives you an option to "prettify" your query with a click of a button, which makes it easier for humans to read.

![Schema Tab in the Playground](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-356de8049594000233998a6bf5200d9e43917e53%2Fprettify.png?alt=media)

## Persisted Queries

The Graphql playground supports [persisted Graphql queries](https://docs.umbraco.com/umbraco-heartcore/api-documentation/graphql/persisted-queries). To access Persisted queries you have to go to the [GraphQL Playground](#accessing-graphql-playground) and click the persisted queries tab

![Persisted queries tab](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-7fba137c7b04ae440d4872b068a7ece75878de7c%2Fpersisted-queries-tab.png?alt=media)

### Create a new persisted query

1. Click the `Create Persisted Query` button
2. Enter a name for the query in the new query editor that appears
3. Write your query in the editor
4. Click the `Save` button

![Create persisted query](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-95d63a37e54005367d778635fd2625c347496f1a%2Fcreate-persisted-query.png?alt=media)

### Update a persisted query

1. Find the query you want to update in the persisted queries list
2. Click on the name of the query
3. Make your changes in the editor that appears with the query
4. Click the `Save` button

![Update persisted query](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-c706827a9032c1e1b713c37148d82b0cca67f149%2Fupdate-persisted-query.png?alt=media)

### Delete a persisted query

1. Find the query you want to delete in the persisted queries list
2. Click on the name of the query
3. Click the action menu in the top right corner of the editor with the query
4. Click the `Delete` button
5. Confirm the deletion

![Delete persisted query](https://3751537080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fad8WDpzCbd6plrNqe51p%2Fuploads%2Fgit-blob-9b760a30e347ec805228014a6a8c0bd546c848d3%2Fdelete-persisted-query.png?alt=media)