# 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="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FVfYjxC9CNAK16dEZVWLC%2FCleanShot%202025-05-14%20at%2016.01.40%402x-min.png?alt=media&#x26;token=97bd91be-9ed1-4c7e-9ad5-a53e35b10e28" 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;
});
```