译零 TransZero · TanStack Query 中文文档
主站

后台拉取指示器

更新于 2026-11-02 Solid 查看英文原文 ↗

查询的 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}

本页为 TanStack Query 文档(Solid 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de