译零 TransZero · TanStack Query 中文文档
主站

QueryObserver

更新于 2026-11-02 Angular 查看英文原文 ↗

定义于:packages/query-core/src/queryObserver.ts:56

QueryObserver 监听 QueryCache 中的单个查询,并根据其状态计算一个 QueryObserverResult;每当底层查询(或观察者自身的选项)发生变化时,它都会重新计算并通知订阅者。它是框架适配器(例如 useQuery)构建其 Hook 的基础原语,但也可直接用于在任何框架之外观察和切换查询。

示例

TypeScript
1const observer = new QueryObserver(queryClient, {2  queryKey: ['posts'],3  queryFn: fetchPosts,4})5 6const unsubscribe = observer.subscribe((result) => {7  console.log(result.data)8})

继承自

  • Subscribable<QueryObserverListener<TData, TError>>

被以下类型扩展

类型参数

TQueryFnData

TQueryFnData = unknown

TError

TError = DefaultError

TData

TData = TQueryFnData

TQueryData

TQueryData = TQueryFnData

TQueryKey

TQueryKey extends QueryKey = QueryKey

构造函数

构造函数

TypeScript
1new QueryObserver<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(client: QueryClient, options: QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>): QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>;

定义于:packages/query-core/src/queryObserver.ts:86

参数

client

QueryClient

options

QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>

返回值

QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>

重写自

TypeScript
1Subscribable<QueryObserverListener<TData, TError>>.constructor

属性

options

TypeScript
1options: QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>;

定义于:packages/query-core/src/queryObserver.ts:88

方法

destroy()

TypeScript
1destroy(): void;

定义于:packages/query-core/src/queryObserver.ts:166

停止观察当前查询:清除所有监听器、取消过期与重新拉取间隔定时器,并将此观察者从其所观察的查询中移除。

返回值

void


fetchOptimistic()

TypeScript
1fetchOptimistic(options: QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>): Promise<QueryObserverResult<TData, TError>>;

定义于:packages/query-core/src/queryObserver.ts:412

使用给定选项拉取一个查询,该操作不会影响当前观察者自身所跟踪的查询或结果,并返回一个 Promise,该 Promise 将以该拉取操作对应的 QueryObserverResult 为解析值。这适用于提前预取另一个观察者(例如即将导航到的查询)所需的数据。

参数

options

QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>

待拉取查询的观察者选项。

返回值

Promise<QueryObserverResult<TData, TError>>

一个 Promise,其解析值为所拉取查询的结果。

示例

TypeScript
1const result = await observer.fetchOptimistic({2  queryKey: ['posts', 2],3  queryFn: () => fetchPost(2),4})5console.log(result.data)

getCurrentQuery()

TypeScript
1getCurrentQuery(): Query<TQueryFnData, TError, TQueryData, TQueryKey>;

定义于:packages/query-core/src/queryObserver.ts:371

返回此观察者当前正在观察的 Query 实例。

返回值

Query<TQueryFnData, TError, TQueryData, TQueryKey>

被观察的查询。


getCurrentResult()

TypeScript
1getCurrentResult(): QueryObserverResult<TData, TError>;

定义于:packages/query-core/src/queryObserver.ts:330

返回被观察查询最近一次计算出的 QueryObserverResult。这是对某一时刻状态的读取;若需实时获知更新,请改为订阅该观察者(通过其继承的 subscribe 方法)。

返回值

QueryObserverResult<TData, TError>

观察者的最新结果。

示例

TypeScript
1const result = observer.getCurrentResult()2console.log(result.status, result.data)

getOptimisticResult()

TypeScript
1getOptimisticResult(options: DefaultedQueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>): QueryObserverResult<TData, TError>;

定义于:packages/query-core/src/queryObserver.ts:281

立即基于给定(已默认化)的选项计算观察者当前会产生的 QueryObserverResult,若底层 Query 尚未存在则先创建之,且不等待订阅回调触发。框架适配器(例如 useQuery)在每次渲染时调用此方法,以便同步获取返回值,早于 setOptions 触发实际拉取。

参数

options

DefaultedQueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>

用于计算结果的已默认化观察者选项。

返回值

QueryObserverResult<TData, TError>

对应选项的结果。


hasListeners()

TypeScript
1hasListeners(): boolean;

定义于:packages/query-core/src/subscribable.ts:43

当至少有一个监听器注册时返回 true;所有监听器均已注销后返回 false。

返回值

boolean

至少有一个监听器注册时返回 true。

继承自

TypeScript
1Subscribable.hasListeners

refetch()

TypeScript
1refetch(options?: RefetchOptions): Promise<QueryObserverResult<TData, TError>>;

定义于:packages/query-core/src/queryObserver.ts:387

重新拉取被观察的查询,并返回一个 Promise,该 Promise 将以重新拉取后的 QueryObserverResult 为解析值。

参数

options?

RefetchOptions = {}

设置 cancelRefetch 为 false 可保留正在进行的拉取而不取消它;设置 throwOnError 为 true 可在重新拉取失败时拒绝该 Promise。

返回值

Promise<QueryObserverResult<TData, TError>>

一个 Promise,其解析值为重新拉取完成后的结果。

示例

TypeScript
1const result = await observer.refetch({ cancelRefetch: false })2console.log(result.data)

setOptions()

TypeScript
1setOptions(options: QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>): void;

定义于:packages/query-core/src/queryObserver.ts:189

更新观察者的选项。这将重新解析被观察的查询(若 queryKey 发生变化,则可能切换至另一个查询),在新选项要求拉取且观察者拥有订阅者时触发拉取,重新计算当前结果,并按需重新调度过期与重新拉取间隔定时器。

参数

options

QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>

新的观察者选项。应用前将使用 QueryClient#defaultQueryOptions 对其进行默认化。

返回值

void

抛出异常

若 enabled 既非布尔值也非函数。

示例

TypeScript
1observer.setOptions({ queryKey: ['posts', 1], queryFn: () => fetchPost(1) })2// later: switch to a different query, reusing the same observer3observer.setOptions({ queryKey: ['posts', 2], queryFn: () => fetchPost(2) })

shouldFetchOnReconnect()

TypeScript
1shouldFetchOnReconnect(): boolean;

定义于:packages/query-core/src/queryObserver.ts:139

返回被观察查询当前是否处于过期状态,且已配置(通过 refetchOnReconnect 选项)在网络重连时重新拉取。

返回值

boolean

若观察者应在重连时重新拉取查询,则返回 true。


shouldFetchOnWindowFocus()

TypeScript
1shouldFetchOnWindowFocus(): boolean;

定义于:packages/query-core/src/queryObserver.ts:153

返回被观察查询当前是否处于过期状态,且已配置(通过 refetchOnWindowFocus 选项)在窗口获得焦点时重新拉取。

返回值

boolean

若观察者应在窗口获得焦点时重新拉取查询,则返回 true。


subscribe()

TypeScript
1subscribe(listener: QueryObserverListener): () => void;

定义于:packages/query-core/src/subscribable.ts:28

注册一个监听器,使其在该对象通知每次更新时被调用。返回一个用于移除该监听器的函数——调用它即可停止监听。基类自身永远不会主动丢弃监听器,但某些子类会在 destroy() 中清空全部监听器。

参数

listener

QueryObserverListener

每次更新时被调用,参数为子类传递给其订阅者的任意值。

返回值

一个用于移除监听器的函数。

() => void

示例

TypeScript
1const unsubscribe = subscribable.subscribe(() => {2  // react to the update3})4 5unsubscribe()

继承自

TypeScript
1Subscribable.subscribe

trackProp()

TypeScript
1trackProp(key: 2  | "error"3  | "data"4  | "isError"5  | "isPending"6  | "isLoading"7  | "isLoadingError"8  | "isRefetchError"9  | "isSuccess"10  | "isPlaceholderData"11  | "status"12  | "dataUpdatedAt"13  | "errorUpdatedAt"14  | "failureCount"15  | "failureReason"16  | "errorUpdateCount"17  | "isFetched"18  | "isFetchedAfterMount"19  | "isFetching"20  | "isInitialLoading"21  | "isPaused"22  | "isRefetching"23  | "isStale"24  | "isEnabled"25  | "refetch"26  | "fetchStatus"): void;

定义于:packages/query-core/src/queryObserver.ts:363

记录给定 QueryObserverResult 属性已被读取,因此后续更新仅在被追踪属性实际发生变化时才通知此观察者。通常由 QueryObserver#trackResult 的代理间接调用;直接暴露此方法供那些自行追踪属性访问(例如通过其自身的响应式系统)而非通过代理的适配器使用。

参数

key

| "error" | "data" | "isError" | "isPending" | "isLoading" | "isLoadingError" | "isRefetchError" | "isSuccess" | "isPlaceholderData" | "status" | "dataUpdatedAt" | "errorUpdatedAt" | "failureCount" | "failureReason" | "errorUpdateCount" | "isFetched" | "isFetchedAfterMount" | "isFetching" | "isInitialLoading" | "isPaused" | "isRefetching" | "isStale" | "isEnabled" | "refetch" | "fetchStatus"

被读取的属性名称。

返回值

void


trackResult()

TypeScript
1trackResult(result: QueryObserverResult<TData, TError>, onPropTracked?: (key: 2  | "error"3  | "data"4  | "isError"5  | "isPending"6  | "isLoading"7  | "isLoadingError"8  | "isRefetchError"9  | "isSuccess"10  | "isPlaceholderData"11  | "status"12  | "dataUpdatedAt"13  | "errorUpdatedAt"14  | "failureCount"15  | "failureReason"16  | "errorUpdateCount"17  | "isFetched"18  | "isFetchedAfterMount"19  | "isFetching"20  | "isInitialLoading"21  | "isPaused"22  | "isRefetching"23  | "isStale"24  | "isEnabled"25  | "refetch"26| "fetchStatus") => void): QueryObserverResult<TData, TError>;

定义于:packages/query-core/src/queryObserver.ts:343

将一个 QueryObserverResult 包裹在一个 Proxy 中,该代理通过 QueryObserver#trackProp(及一个可选的 onPropTracked 回调)记录哪些属性被读取。当 notifyOnChangeProps 未设置时,框架适配器使用此方法实现其默认行为:“仅在你实际读取的属性发生变化时才重新渲染”。

参数

result

QueryObserverResult<TData, TError>

待包裹的结果。

onPropTracked?

(key: | "error" | "data" | "isError" | "isPending" | "isLoading" | "isLoadingError" | "isRefetchError" | "isSuccess" | "isPlaceholderData" | "status" | "dataUpdatedAt" | "errorUpdatedAt" | "failureCount" | "failureReason" | "errorUpdateCount" | "isFetched" | "isFetchedAfterMount" | "isFetching" | "isInitialLoading" | "isPaused" | "isRefetching" | "isStale" | "isEnabled" | "refetch" | "fetchStatus") => void

每次读取属性时,以该属性名称为参数调用此回调。

返回值

QueryObserverResult<TData, TError>

一个追踪属性读取行为的 result 代理。


updateResult()

TypeScript
1updateResult(): void;

定义于:packages/query-core/src/queryObserver.ts:765

根据当前查询/选项重新计算并存储当前结果,若结果发生变化则通知监听器。框架适配器在完成订阅后立即调用此方法,以确保不会遗漏从创建观察者到订阅之间发生的任何查询更新。

返回值

void

本页为 TanStack Query 文档(Angular 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de