Task backed components
Using task backed components
task
.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
.
The refetchInterval
prop represents how often (in milliseconds) the task query should be rerun to refetch data automatically.
The onSuccess
and onError
callbacks will run on task success or failure.
The executeOnMount
(true by default), executeOnReconnect
(true by default), and executeOnWindowFocus
(false by default) params control when the task is (re)run - on component mount, when the window is (re)focused, and if the network reconnects.
By task function
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);
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 () => animals8);
refetchInterval
that refetches the task every 10s.By slug
slug
of an Airplane task to the component.tsxCopied1<Table title="Cats" task="list_cats" />
tsxCopied1<Table title="Cats" task={{ slug: "search_animals", params: { animal: "cat" } }} />
refetchInterval
that refetches the task every 10s.tsxCopied1<Table2title="Cats"3task={{ slug: "search_animals", params: { animal: "cat" }, refetchInterval: 10000 }}4/>
Transforming data
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?
task
prop: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.slug
field.shownFields
is set, only fields in shownFields
are shown.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.