# GraphQL Query

The GraphQL Query step allows you to write and send GraphQL queries to your GraphQL server. You can also use this step to send mutations. \
UI component values and other variables can be added to the query using the `{{ui.input.value}}` expression in the **Variables** section.

{% hint style="warning" %}
UI Bakery variables' syntax cannot be used in the body of the query.
{% endhint %}

By default, you don't even need to connect a GraphQL data source to send the queries. You simply need to specify the URL and send the request.

{% hint style="info" %}
Consider connecting your GraphQL data source when you need to share the same URL or other settings between multiple GraphQL Query steps.
{% endhint %}

## Dynamic query variables

First, just specify a query with the variables defined in it:

```graphql
query GetUsers($limit: Int) {
  users(limit: $limit) {
    id
    name
  }
}
```

Then, add the variables in the **Variables** section, for example:  `limit = 10` or `limit = {{ui.input.value}}`. 

<figure><img src="/files/9hWNoAAj3d3FBTtha2Km" alt=""><figcaption></figcaption></figure>

This way, you can keep the body of the query clean of UI Bakery variables' syntax and simply copy-paste it from your GraphQL Dev environment.

## Data transformation

If the database returns its data in a different format than expected for the components, you can modify it. For example, you can turn on the **Transform result** toggle in the action's settings or add a new *JavaScript Code* step to transform the data.

Here are some examples of possible data transformations:

* Access an inner array object and map it to a new array:

```javascript
return {{data}}.map(item => {
  return {
    id: item.id,
    name: item.name.toUpperCase(),
  };
});
```

* Add a new key to the array of objects:

```javascript
return {{data}}.map(item => {
  return {
    ...item, // put all the keys from the original object
    created_at: new Date(), // add a new property
  };
});
```

* Filter an array of objects (short version):

```javascript
return {{data}}.filter(item => item.id > 10);
```

Multiline version:

```javascript
return {{data}}.filter((item) => {
  return item.id > 10;
});
```


---

# 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.uibakery.io/reference/working-with-actions/graphql-query.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.