Client-side task caching

Task queries from views can also take advantage of server-side task caching.
Task queries executed via Task-backed components or React hooks are automatically cached client-side and intelligently refetched.
Task queries are refetched automatically in the background when:
  • The network is reconnected (executeOnReconnect)
  • New instances of the query remount (executeOnMount)
Additional refetching behavior can be configured to:
  • Refetch when the window is refocused (executeOnWindowFocus)
  • Refetch on an interval (refetchInterval)
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.

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 directly 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.
PrivacyTermsSupport