GraphQL query

The GraphQL step allows you to write and send GraphQL queries to your GraphQL server. You can also use the GraphQL 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 query body.

By default, you don't even need to connect a data source to send the queries. Just type in the URL and send the request.

Create a data source when you need to share the same URL or other settings between multiple GraphQL steps.

Dynamic query variables

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

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

Then, add the variables to the variables section limit = 10 or limit = {{ui.input.value}}. This way you can keep the query body clean of the UI Bakery variables syntax and just copy-paste it from your GraphQL development environment.

Data transformation

If the database returns its data in a different format than the components expect, enable transform result toggle or add a new code step to transform the data.

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

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

Add a new key to the array of objects:

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

Filter array of objects, short version:

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

Multiline version:

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