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

You can learn more about these methods here.

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

If your server doesn't support GraphQL introspection queries, 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.

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

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 action type:

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.
3. Click Execute action.

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.