Web / TanStack Interview Questions
What are the status and fetchStatus values in TanStack Query v5 and how do they drive UI?
v5 separates state into two orthogonal dimensions: status (what does the cache contain?) and fetchStatus (is a network request happening?). Understanding both prevents wrong loading UI.
| status | fetchStatus | Meaning |
|---|---|---|
| pending | fetching | No data yet, first load — show full-page spinner |
| pending | idle | enabled=false — query paused, will never fetch |
| success | fetching | Has data, refetching in background — show subtle indicator |
| success | idle | Has fresh data, nothing happening — steady state |
| error | idle | All retries exhausted — show error UI |
<script setup lang="ts"> import { useQuery } from "@tanstack/vue-query" const { data, isPending, isSuccess, isError, isFetching, // fetchStatus==="fetching" isLoading, // isPending && isFetching â true ONLY on first load error, }=useQuery({ queryKey:["posts"], queryFn:fetchPosts }) </script> <template> <LoadingSpinner v-if="isLoading" /> <ErrorMessage v-else-if="isError" :msg="error.message" /> <div v-else> <RefetchBadge v-if="isFetching" /> <PostList :posts="data" /> <; </template>
More Related questions...