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

加载状态指示器 Background Fetching Indicators

查询的status === 'loading'状态足以显示查询的初始硬加载状态,但是有时你可能想显示一个额外的指示符,表明该查询正在后台重新获取数据。 为此,Query 提供了一个isFetching的布尔值,无论status变量的状态如何,你都可以使用它来表示数据正在获取中:

HTML
1<script setup>2import { useQuery } from '@tanstack/vue-query'34const { isLoading, isFetching, isError, data, error } = useQuery({5  queryKey: ['todos'],6  queryFn: getTodos,7})8</script>9 10<template>11  <div v-if="isFetching">Refreshing...</div>12  <span v-if="isLoading">Loading...</span>13  <span v-else-if="isError">Error: {{ error.message }}</span>14  <!-- We can assume by this point that `isSuccess === true` -->15  <ul v-else-if="data">16    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>17  </ul>18</template>

显示全局后台加载的状态

除了单个查询的加载状态外,如果要在任何查询正在获取数据时(包括在后台)都显示一个全局的加载指示器,你可以使用useIsFetchingHook:

HTML
1<script setup>2import { useIsFetching } from '@tanstack/vue-query'34const isFetching = useIsFetching()5</script>6 7<template>8  <div v-if="isFetching">Queries are fetching in the background...</div>9</template>

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

本页译文取自社区中文版 react-query-web-i18n(MIT),非本站翻译,已停止更新,内容可能与当前 API 有出入。

译自上游 (未记录版本)