# GraphQL

UI Bakery allows you to easily connect to GraphQL with no need for additional layers like APIs and third-party services.

## Configuration

### Prerequisites

If your API is hosted behind a Firewall, you need to add our [IP addresses](https://docs.uibakery.io/concepts/data-sources#whitelisting-ip-addresses) to the Firewall whitelist.

### Connecting the data source

1. On the **Data sources** page, click **Connect**, and select *GraphQL* in the Data sources list.
2. Specify the *URL* to your GraphQL server.
3. (Optional) Provide *HTTP headers* and *Query Params* - they will be sent with every query to the data source but can also be overwritten for each specific query in the action configuration.
4. Next, select the authentication method in the **Authentication settings** dropdown:
   1. None
   2. Basic Auth
   3. Digest Auth
   4. OAuth2
   5. API Key
   6. mTLS

{% hint style="info" %}
You can learn more about these methods [here](https://docs.uibakery.io/reference/http/api-authentication#authentication-methods).
{% endhint %}

5. Specify the required credentials according to the authentication method selected.

{% hint style="warning" %}
If your server doesn't support GraphQL [introspection queries](https://graphql.org/learn/introspection/), then deselect the **Load and save GraphQL schema to allow queries autocomplete** checkbox. GraphQL queries will continue to work but autocomplete suggestions in the query editor will be limited.
{% endhint %}

6. Click **Test connection** to check whether the data source can be connected, and then click **Connect Datasource** to complete the setup.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FAbU9s4mhO2DkmArugHzA%2FCleanShot%202025-04-16%20at%2014.38.56%402x-min.png?alt=media&#x26;token=36f1d137-a6c5-4e8e-8263-e54e6d279072" alt=""><figcaption></figcaption></figure>

## Usage

When you've established the connection between GraphQL and UI Bakery, you can start interacting with its data. For this purpose, you can use the [GraphQL Query](https://docs.uibakery.io/reference/working-with-actions/graphql-query) action step:

1. Create a new action, select your *GraphQL* data source and the *GraphQL Query* action will be selected automatically.
2. Next, specify your query.\
   If you need to pass users' data in the query, you can use [GraphQL variables](https://graphql.org/learn/queries/#variables).
3. Click **Execute action**.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F4a00ITLldweSuUKAUrtd%2FCleanShot%202025-04-16%20at%2015.16.03%402x-min.png?alt=media&#x26;token=9c10a231-d866-4788-9ec6-7af921ff387d" alt=""><figcaption></figcaption></figure>

### Error handling

By default, the GraphQL server returns the `200`  status response even if the query failed. \
UI Bakery considers a request failed if it contains **errors** in the response - errors can be accessed via the `{{error}}` action variable. \
You can also access the raw GraphQL response with the `{{res}}` variable.