Documentation

Data Transformer

Map one data schema to another to reshape API data to fit your UI

2 min read

A Data Transformer is a project-level type that defines a mapping between two Data Schemas (From → To). It lets you decouple the shape of the data an API returns from the shape your screens use.

Why it helps

To bind an API response straight to your screens, you usually have to match your UI to the API's response shape. That means changing your screens whenever the API spec changes, and it's hard to design the UI freely first.

With a Data Transformer, you design the UI against its own data model (the To schema) and convert the API response (the From schema) at runtime to fill it.

Defining a mapping

In the Data Scheme sidebar, add a Data Transformer alongside a Schema and Enum.

  • Pick the From / To schemas.
  • The two schemas appear on a canvas — From on the left, To on the right — with a connection node on each field.
  • Drag a From node (left) onto a To node (right) to connect them. Only type-compatible fields can connect.
  • A To field takes a single source; a From field can feed several To fields.
  • Drag a connection's right end to empty space to remove it, or onto another node to reroute it.

On narrow widths the node graph is replaced by a field-list binding UI.

The Data Mapper action

You apply a Data Transformer with the Data Mapper action in Action Flow.

  • Bind the input — data shaped like the From schema (a single value or an array) — and pick the transformer.
  • The output is shaped like the To schema (an array if the input is an array), ready to feed into Update Data to refresh a screen.

For example, if the server returns Array<Result> and you build a Result → Product transformer, Data Mapper can turn it into Array<Product> to fill a List on screen.