Task backed components
Task backed components are the easiest way to fetch data or make backend mutations in a view.
Task backed components automatically execute a task or runbook, populate the component with data,
and handle loading and error states.
Using task backed components
Using task backed components
Task backed components have a unique prop called
task
.task
optional
The task query to execute when this component loads. The component's data will be populated by the task's output and loading and error states will be handled automatically.
If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task"
) or an AirplaneFunc
—the return value of airplane.task()
(task={myTask}
).
If the task does require parameters or special options, pass the task as an object. If you are using a slug, specify the slug
prop to pass the task configuration as a SlugQuery
. If you are using an AirplaneFunc
, specify the fn
prop to pass the task configuration as a FunctionQuery
.
SlugQuery
FunctionQuery
By task function
By task function
The recommended way to use a task backed component is to supply an
AirplaneFunc
which is the value
returned by the airplane.task
function. This is only feasible if your task is in the file as your
view or is in the same project and is imported.tsxCopied1const TaskBackedWithAirplaneFunc = () => {2return <Table title="Cats" task={ListCatsTask} />;3};45export const ListCatsTask = airplane.task({ slug: "list_cats" }, async () => cats);
If the task has parameters, you can supply a full task request. The types of the parameters in your
task request will automatically be inferred from the task if you are using TypeScript!
tsxCopied1const TaskBackedWithAirplaneFunc = () => {2return <Table title="Cats" task={{ fn: ListCatsTask, params: { animal: "cat" } }} />;3};45export const ListCatsTask = airplane.task(6{ slug: "search_animals", parameters: { animal: "shorttext" } },7async () => animals,8);
Using a full task request also allows you to add additional options to the request like adding a
refetchInterval
that refetches the task every 10s.By slug
By slug
You can also supply the
slug
of an Airplane task to the component.tsxCopied1<Table title="Cats" task="list_cats" />
If a task has parameters, you can supply a full task request.
tsxCopied1<Table title="Cats" task={{ slug: "search_animals", params: { animal: "cat" } }} />
Using a full task request also allows you to add additional options to the request like adding a
refetchInterval
that refetches the task every 10s.tsxCopied1<Table2title="Cats"3task={{ slug: "search_animals", params: { animal: "cat" }, refetchInterval: 10000 }}4/>
Transforming data
Transforming data
Sometimes you may want to transform the task output before it is displayed in a task backed
component. Each task backed component has an
outputTransform
prop that allows you to transform the
data before it is displayed by the component.tsxCopied1<Table2title="Cats"3task="list_cats"4outputTransform={(output) => output.map((cat) => ({ ...cat, name: cat.name.toUpperCase() }))}5/>
Which components can be task backed?
Which components can be task backed?
The following components can be task backed via the
task
prop:Form
Form
Form
can also be task backed, but a task-backed form automatically
infers its fields from the task parameters, and the parameter values can be set using the form
values. The task
prop on Form
follows a modified API that allows the inputs for each parameter
to be customized.task
optional
string
| {
slug: string;
shownFields?: string[];
hiddenFields?: string[];
fieldOptions?: {
slug: string;
value?: string | number | boolean | Date;
allowedValues?: string[] | number[] | Date;
}[];
}
The task associated with the form. This can either be a string, corresponding to the task slug, or an options struct, for which the task slug must be passed in the
slug
field.If
shownFields
is set, only fields in shownFields
are shown.If
hiddenFields
is set, fields in hiddenFields
are hidden.fieldOptions
can be used to restrict the values for a field. Each option in fieldOptions
has a slug
field, corresponding to the parameter slug.If you want to fetch data from another component, see
Calling tasks with React hooks.