Task caching

Task queries executed via Task-backed components or Manual task execution are automatically cached and intelligently refetched.
Task queries are refetched automatically in the background when:
  • The window is refocused
  • The network is reconnected
  • New instances of the query remount
  • The query is optionally configured with a refetchInterval
To change this functionality, you can use options like executeOnMount, executeOnWindowFocus, and executeOnReconnect.
Query results that have no more active instances of useTaskQuery are cached in case they are used again at a later time. These "inactive" queries are garbage collected after 5 minutes.

Manually refetching tasks

Waiting for tasks to be automatically fetched again doesn't always work, especially when you know for a fact that a task's data is out of date because of something the user has done. For that purpose, there are a few ways to manually refetch a task.

refetchTasks on a mutation

The simplest way to refetch after a task mutation is to use the refetchTasks field. This field, specified on the mutation, refetches one or more tasks after the mutation succeeds.
In the following example, a counter backed by a GetCount task increments when the user clicks a task-backed button. When the task backing the button succeeds, we use refetchTasks to refetch the GetCount task and update the counter.
tsx
Copied
1
const { data } = useTaskQuery(GetCount);
2
3
return (
4
<Stack>
5
<Text>{data}</Text>
6
<Button task={{ fn: IncrementCounter, refetchTasks: GetCount }}>Increment</Button>
7
</Stack>
8
);
refetchTasks can be a single task or an array of tasks: refetchTasks: [GetCount, GetOtherCount].

Query matching with refetchTasks

When refetching tasks, all queries that match the task are refetched, regardless of parameters.
tsx
Copied
1
// Both tasks below will be refetched when IncrementCounter succeeds.
2
const { data: todos } = useTaskQuery({ fn: FetchTodoList });
3
const { data: urgentTodos } = useTaskQuery({ fn: FetchTodoList, params: { type: "urgent" } });
4
5
return <Button task={{ fn: IncrementCounter, refetchTasks: FetchTodoList }}>Increment</Button>;
You can refetch only tasks that have parameters by including params in the call to refetchTasks.
tsx
Copied
1
// This task is NOT refetched.
2
const { data: todos } = useTaskQuery({ fn: FetchTodoList });
3
// This task IS refetched.
4
const { data: urgentTodos } = useTaskQuery({ fn: FetchTodoList, params: { type: "urgent" } });
5
6
return (
7
<Button
8
task={{
9
fn: IncrementCounter,
10
refetchTasks: { fn: FetchTodoList, params: { type: "urgent" } },
11
}}
12
>
13
Increment
14
</Button>
15
);

refetch on a query

useTaskQuery returns a refetch function that can be called to manually refetch a task.
In the following example, a counter backed by a GetCount task increments when the user clicks a task-backed button. When the task backing the button succeeds, we call the refetch function returned by useTaskQuery to refetch the GetCount task and update the counter.
tsx
Copied
1
const { data, refetch } = useTaskQuery(GetCount);
2
3
return (
4
<Stack>
5
<Text>{data}</Text>
6
<Button task={{ fn: IncrementCounter, onSuccess: refetch }}>Increment</Button>
7
</Stack>
8
);

useRefetchTask

For more complex use cases, you can use the useRefetchTask hook to manually refetch a task. useRefetchTask returns a function that allows you to refetch one or more tasks. This function works exactly like refetchTasks on a mutation.
In the following example, a counter backed by a GetCount task increments when the user clicks a task-backed button. When the task backing the button succeeds, we call the refetch function returned by useRefetchTask to refetch the GetCount task and update the counter.
tsx
Copied
1
const { data } = useTaskQuery(GetCount);
2
const refetch = useRefetchTask();
3
4
return (
5
<Stack>
6
<Text>{data}</Text>
7
<Button task={{ fn: IncrementCounter, onSucess: () => refetch(GetCount) }}>Increment</Button>
8
</Stack>
9
);
You should only use useRefetchTask when the other options don't fit your use case. For example, you can utilize this method when using a custom component or when you want to refetch on a task error.