后台拉取指示器
查询的 status === 'pending' 状态足以显示查询的初始硬加载状态,但有时你可能希望额外显示一个指示器,表明该查询正在后台重新拉取。为此,查询还为你提供了一个 isFetching 布尔值,可用于指示查询当前处于拉取状态,而无需关心 status 变量的具体状态:
TypeScript
1import { Switch, Match, Show, For } from 'solid-js'2 3function Todos() {4 const todosQuery = useQuery(() => ({5 queryKey: ['todos'],6 queryFn: fetchTodos,7 }))8 9 return (10 <Switch>11 <Match when={todosQuery.isPending}>12 <span>Loading...</span>13 </Match>14 <Match when={todosQuery.isError}>15 <span>Error: {todosQuery.error.message}</span>16 </Match>17 <Match when={todosQuery.isSuccess}>18 <Show when={todosQuery.isFetching}>19 <div>Refreshing...</div>20 </Show>21 <div>22 <For each={todosQuery.data}>{(todo) => <Todo todo={todo} />}</For>23 </div>24 </Match>25 </Switch>26 )27}显示全局后台拉取加载状态
除了单个查询的加载状态外,如果你希望在任意查询(包括后台拉取的查询)处于拉取状态时显示一个全局加载指示器,则可以使用 useIsFetching 原语:
TypeScript
1import { useIsFetching } from '@tanstack/solid-query'2 3function GlobalLoadingIndicator() {4 const isFetching = useIsFetching()5 6 return (7 <Show when={isFetching()}>8 <div>Queries are fetching in the background...</div>9 </Show>10 )11}