Background Fetching Indicators

<script setup>
import { useQuery } from "@tanstack/vue-query";

const { isLoading, isFetching, isError, data, error } = useQuery({
  queryKey: ["todos"],
  queryFn: getTodos,
});
</script>

<template>
  <div v-if="isFetching">Refreshing...</div>
  <span v-if="isLoading">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <!-- 到这一步，我们可以假设 `isSuccess === true` -->
  <ul v-else-if="data">
    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
  </ul>
</template>

<script setup>
import { useIsFetching } from "@tanstack/vue-query";

const isFetching = useIsFetching();
</script>

<template>
  <div v-if="isFetching">后台正在获取查询..</div>
</template>