💱Transformers

Transformers are designed for data transformation and the reuse of multi-line JavaScript code. In business scenarios, data from queries or components may not always align with your requirements. Moreover, you may find yourself using the same code block multiple times within an app. In such instances, a transformer proves invaluable.

In contrast to inline code within {{ }}, transformers accommodate multi-line code blocks.

Unlike JavaScript queries, transformers are tailored for read-only operations. This implies that you cannot initiate a query or update a dynamic variable within a transformer.

Quickstart

To create a transformer, navigate to the query editor and click on "+ New", then select "Transformer".

Next, compose your JavaScript code within the transformer. Afterward, you can click on "Preview" to obtain the return value, which you can access in your app using transformerName.value.

Check the following example:

The use of {{ }} in a transformer or JS query isn't allowed. This syntax serves only for single-line JavaScript statements; transformers and JS queries are designed to execute several lines of JS script.

Use cases

Transform timestamp

Use the moment().format() method to transform timestamp formats. The following example converts the timestamp value of begin_time returned by myQuery to DD-MM-YYYY format.

return myQuery.data.map(it => {
     return {
         ...it,
         begin_time: moment(it.begin_time).format('DD-MM-YYYY')
     };
})

Sort query data

Using the _.orderBy() method from lodash to sort data. The following example sorts myQuery.data by the age column in ascending order.

return _.orderBy(myQuery.data, 'age', 'asc')

Join two queries

The following example demonstrates how to merge the results of getEmployees and getEmployeeDetail queries based on the employee id.

const employees = getEmployees.data;
const employeeDetail = getEmployeeDetail.data;
return employees.map(employee => ({
  ...employee,
  employeeDetail : employees.find(empl => empl.employee_id === employee.id),
}));