GraphQL Query
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
UI Bakery variables' syntax cannot be used in the body of the query.
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.
First, just specify a query with the variables defined in it:
Then, add the variables in the Variables section, for example: limit = 10
or limit = {{ui.input.value}}
.
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.
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:
Add a new key to the array of objects:
Filter an array of objects (short version):
Multiline version: