snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)
This commit is contained in:
66
docs/framework/vue/reference/functions/useIsFetching.md
Normal file
66
docs/framework/vue/reference/functions/useIsFetching.md
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: useIsFetching
|
||||
title: useIsFetching
|
||||
---
|
||||
|
||||
```ts
|
||||
function useIsFetching(fetchingFilters, queryClient?): Ref<number>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useIsFetching.ts:54](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useIsFetching.ts#L54)
|
||||
|
||||
The `useIsFetching` composable returns a `ref` to the `number` of the queries that your application is
|
||||
loading or fetching in the background (useful for app-wide loading indicators).
|
||||
|
||||
`fetchingFilters` may be a plain object, `MaybeRefDeep`, or a reactive getter (`() => ({ ... })`) — pass a
|
||||
getter if the filters themselves depend on other reactive state.
|
||||
|
||||
## Parameters
|
||||
|
||||
### fetchingFilters
|
||||
|
||||
[`UseIsFetchingFilters`](../type-aliases/UseIsFetchingFilters.md) = `{}`
|
||||
|
||||
The [QueryFilters](../interfaces/QueryFilters.md) to narrow down the matched queries.
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
`Ref`\<`number`\>
|
||||
|
||||
A `ref` to the `number` of the queries that your application is currently loading or fetching in
|
||||
the background.
|
||||
|
||||
## Examples
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useIsFetching } from '@tanstack/vue-query'
|
||||
|
||||
// How many queries matching the posts prefix are fetching?
|
||||
const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isFetchingPosts">Refreshing posts...</span>
|
||||
</template>
|
||||
```
|
||||
|
||||
A global loading indicator for any query fetching in the background, not just the ones on screen:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useIsFetching } from '@tanstack/vue-query'
|
||||
|
||||
const isFetching = useIsFetching()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isFetching">Queries are fetching in the background...</div>
|
||||
</template>
|
||||
```
|
||||
Reference in New Issue
Block a user