useIsFetching
TypeScript
1function useIsFetching(filters?: Omit<QueryFilters<readonly unknown[]>, "fetchStatus">, queryClient?: QueryClient): number;定义位置:packages/preact-query/src/useIsFetching.ts:41
useIsFetching Hook 返回你的应用当前正在加载或后台拉取(background fetch)的查询(queries)数量,适用于全局加载指示器等场景。
参数
filters?
Omit<QueryFilters<readonly unknown[]>, "fetchStatus">
用于缩小匹配范围的 QueryFilters。
filters 属性
基于 QueryFilters 构建。具体可修改的字段请参见上方类型定义。
queryClient?
使用该参数可指定自定义的 QueryClient;否则将使用离当前组件最近的上下文中的 QueryClient。
返回值
number
返回你的应用当前正在加载或后台拉取的查询(queries)数量。
示例
TypeScript
1import { useIsFetching } from '@tanstack/preact-query'2 3function PostsFetchingIndicator() {4 // How many queries matching the posts prefix are fetching?5 const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })6 7 return isFetchingPosts ? <span>Refreshing posts...</span> : null8}适用于任意后台拉取的查询(而不仅限于当前屏幕中渲染的查询)的全局加载指示器:
TypeScript
1import { useIsFetching } from '@tanstack/preact-query'2 3function GlobalLoadingIndicator() {4 const isFetching = useIsFetching()5 6 return isFetching ? (7 <div>Queries are fetching in the background...</div>8 ) : null9}