46 lines
983 B
Markdown
46 lines
983 B
Markdown
---
|
|
id: background-fetching-indicators
|
|
title: Background Fetching Indicators
|
|
ref: docs/framework/react/guides/background-fetching-indicators.md
|
|
---
|
|
|
|
[//]: # 'Example'
|
|
|
|
```vue
|
|
<script setup>
|
|
import { useQuery } from '@tanstack/vue-query'
|
|
|
|
const { isPending, isFetching, isError, data, error } = useQuery({
|
|
queryKey: ['todos'],
|
|
queryFn: getTodos,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isFetching">Refreshing...</div>
|
|
<span v-if="isPending">Loading...</span>
|
|
<span v-else-if="isError">Error: {{ error.message }}</span>
|
|
<!-- We can assume by this point that `isSuccess === true` -->
|
|
<ul v-else-if="data">
|
|
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
|
|
</ul>
|
|
</template>
|
|
```
|
|
|
|
[//]: # 'Example'
|
|
[//]: # 'Example2'
|
|
|
|
```vue
|
|
<script setup>
|
|
import { useIsFetching } from '@tanstack/vue-query'
|
|
|
|
const isFetching = useIsFetching()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isFetching">Queries are fetching in the background...</div>
|
|
</template>
|
|
```
|
|
|
|
[//]: # 'Example2'
|