Background Fetching Indicators
A query's status === 'pending' state is sufficient enough to show the initial hard-loading state for a query, but sometimes you may want to display an additional indicator that a query is refetching in the background. To do this, queries also supply you with an isFetching boolean that you can use to show that it's in a fetching state, regardless of the state of the status variable:
tsx
import { Switch, Match, Show, For } from 'solid-js'
function Todos() {
const todosQuery = useQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodos,
}))
return (
<Switch>
<Match when={todosQuery.isPending}>
<span>Loading...</span>
</Match>
<Match when={todosQuery.isError}>
<span>Error: {todosQuery.error.message}</span>
</Match>
<Match when={todosQuery.isSuccess}>
<Show when={todosQuery.isFetching}>
<div>Refreshing...</div>
</Show>
<div>
<For each={todosQuery.data}>{(todo) => <Todo todo={todo} />}</For>
</div>
</Match>
</Switch>
)
}
import { Switch, Match, Show, For } from 'solid-js'
function Todos() {
const todosQuery = useQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodos,
}))
return (
<Switch>
<Match when={todosQuery.isPending}>
<span>Loading...</span>
</Match>
<Match when={todosQuery.isError}>
<span>Error: {todosQuery.error.message}</span>
</Match>
<Match when={todosQuery.isSuccess}>
<Show when={todosQuery.isFetching}>
<div>Refreshing...</div>
</Show>
<div>
<For each={todosQuery.data}>{(todo) => <Todo todo={todo} />}</For>
</div>
</Match>
</Switch>
)
}
Displaying Global Background Fetching Loading State
In addition to individual query loading states, if you would like to show a global loading indicator when any queries are fetching (including in the background), you can use the useIsFetching function:
tsx
import { useIsFetching } from '@tanstack/solid-query'
function GlobalLoadingIndicator() {
const isFetching = useIsFetching()
return (
<Show when={isFetching()}>
<div>Queries are fetching in the background...</div>
</Show>
)
}
import { useIsFetching } from '@tanstack/solid-query'
function GlobalLoadingIndicator() {
const isFetching = useIsFetching()
return (
<Show when={isFetching()}>
<div>Queries are fetching in the background...</div>
</Show>
)
}
