InfiniteQueryObserver

Defined in: packages/query-core/src/infiniteQueryObserver.ts:41

An InfiniteQueryObserver extends QueryObserver to observe and switch between infinite queries. It augments the base QueryObserverResult with infinite-query-specific fields and methods, such as hasNextPage and fetchNextPage, and is the primitive that framework adapters (e.g. useInfiniteQuery) build their hooks on top of.

Example#

const observer = new InfiniteQueryObserver(queryClient, {
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
})

const unsubscribe = observer.subscribe((result) => console.log(result))

Extends#

• QueryObserver<TQueryFnData, TError, TData, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>

Type Parameters#

TQueryFnData#

TQueryFnData = unknown

TError#

TError = DefaultError

TData#

TData = InfiniteData<TQueryFnData>

TQueryKey#

TQueryKey extends QueryKey = QueryKey

TPageParam#

TPageParam = unknown

Constructors#

Constructor#

new InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>(client, options): InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:83

Parameters#

client#

QueryClient

options#

InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

Returns#

InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>

Overrides#

QueryObserver.constructor

Properties#

fetch#

protected fetch: ReplaceReturnType<(fetchOptions) => Promise<QueryObserverResult<TData, TError>>, Promise<InfiniteQueryObserverResult<TData, TError>>>;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:72

Overrides#

QueryObserver.fetch

getCurrentResult#

getCurrentResult: ReplaceReturnType<() => QueryObserverResult<TData, TError>, InfiniteQueryObserverResult<TData, TError>>;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:60

Returns the most recently computed QueryObserverResult for the observed query. This is a point-in-time read; to be notified of updates as they happen, subscribe to the observer instead (its inherited subscribe method).

Example#

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

Overrides#

QueryObserver.getCurrentResult

listeners#

protected listeners: Set<QueryObserverListener<TData, TError>>;

Defined in: packages/query-core/src/subscribable.ts:2

Inherited from#

QueryObserver.listeners

options#

options: QueryObserverOptions<TQueryFnData, TError, TData, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;

Defined in: packages/query-core/src/queryObserver.ts:89

Inherited from#

QueryObserver.options

subscribe()#

subscribe: (listener) => () => void;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:55

Parameters#

listener#

InfiniteQueryObserverListener

Returns#

(): void;

Returns#

void

Overrides#

QueryObserver.subscribe

Methods#

bindMethods()#

protected bindMethods(): void;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:96

Returns#

void

Overrides#

QueryObserver.bindMethods

createResult()#

protected createResult(query, options): InfiniteQueryObserverResult<TData, TError>;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:201

Parameters#

query#

Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>

options#

InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

Returns#

InfiniteQueryObserverResult<TData, TError>

Overrides#

QueryObserver.createResult

destroy()#

destroy(): void;

Defined in: packages/query-core/src/queryObserver.ts:161

Stops observing the current query: clears all listeners, cancels the stale and refetch-interval timers, and removes this observer from the query it was observing.

Returns#

void

Inherited from#

QueryObserver.destroy

fetchNextPage()#

fetchNextPage(options?): Promise<InfiniteQueryObserverResult<TData, TError>>;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:161

Fetches the next page of the infinite query and returns a promise that resolves with the resulting InfiniteQueryObserverResult. The page param used for the fetch is determined by getNextPageParam, which receives the current pages/page params and whose result also determines hasNextPage.

Parameters#

options?#

FetchNextPageOptions

Returns#

Promise<InfiniteQueryObserverResult<TData, TError>>

Example#

const { hasNextPage } = observer.getCurrentResult()

if (hasNextPage) {
  await observer.fetchNextPage()
}

See#

InfiniteQueryObserver#fetchPreviousPage

fetchOptimistic()#

fetchOptimistic(options): Promise<QueryObserverResult<TData, TError>>;

Defined in: packages/query-core/src/queryObserver.ts:395

Fetches a query defined by the given options without affecting this observer's own tracked query or result, and returns a promise that resolves with the QueryObserverResult for that fetch. This is useful for prefetching data that another observer (e.g. a query about to be navigated to) will need, ahead of time.

Parameters#

options#

QueryObserverOptions<TQueryFnData, TError, TData, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>

Returns#

Promise<QueryObserverResult<TData, TError>>

Example#

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

Inherited from#

QueryObserver.fetchOptimistic

fetchPreviousPage()#

fetchPreviousPage(options?): Promise<InfiniteQueryObserverResult<TData, TError>>;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:190

Fetches the previous page of the infinite query and returns a promise that resolves with the resulting InfiniteQueryObserverResult. The page param used for the fetch is determined by getPreviousPageParam, which receives the current pages/page params and whose result also determines hasPreviousPage.

Parameters#

options?#

FetchPreviousPageOptions

Returns#

Promise<InfiniteQueryObserverResult<TData, TError>>

Example#

const { hasPreviousPage } = observer.getCurrentResult()

if (hasPreviousPage) {
  await observer.fetchPreviousPage()
}

See#

InfiniteQueryObserver#fetchNextPage

getCurrentQuery()#

getCurrentQuery(): Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;

Defined in: packages/query-core/src/queryObserver.ts:357

Returns the Query instance this observer is currently observing.

Returns#

Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>

Inherited from#

QueryObserver.getCurrentQuery

getOptimisticResult()#

getOptimisticResult(options): InfiniteQueryObserverResult<TData, TError>;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:127

The infinite-query counterpart of QueryObserver#getOptimisticResult, marking the options as an infinite query before delegating to it. Called by framework adapters (e.g. useInfiniteQuery) ahead of subscribing, to compute the current InfiniteQueryObserverResult synchronously.

Parameters#

options#

DefaultedInfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

Returns#

InfiniteQueryObserverResult<TData, TError>

Overrides#

QueryObserver.getOptimisticResult

hasListeners()#

hasListeners(): boolean;

Defined in: packages/query-core/src/subscribable.ts:19

Returns#

boolean

Inherited from#

QueryObserver.hasListeners

onSubscribe()#

protected onSubscribe(): void;

Defined in: packages/query-core/src/queryObserver.ts:110

Returns#

void

Inherited from#

QueryObserver.onSubscribe

onUnsubscribe()#

protected onUnsubscribe(): void;

Defined in: packages/query-core/src/queryObserver.ts:124

Returns#

void

Inherited from#

QueryObserver.onUnsubscribe

refetch()#

refetch(__namedParameters): Promise<QueryObserverResult<TData, TError>>;

Defined in: packages/query-core/src/queryObserver.ts:371

Refetches the observed query and returns a promise that resolves with the resulting QueryObserverResult.

Parameters#

__namedParameters#

RefetchOptions = {}

Returns#

Promise<QueryObserverResult<TData, TError>>

Example#

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

Inherited from#

QueryObserver.refetch

setOptions()#

setOptions(options): void;

Defined in: packages/query-core/src/infiniteQueryObserver.ts:108

Updates the observer's options. Behaves the same as QueryObserver.setOptions, additionally marking the options as belonging to an infinite query before delegating to the base implementation.

Parameters#

options#

InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

Returns#

void

Overrides#

QueryObserver.setOptions

shouldFetchOnReconnect()#

shouldFetchOnReconnect(): boolean;

Defined in: packages/query-core/src/queryObserver.ts:135

Returns whether the observed query is currently stale and configured (via the refetchOnReconnect option) to refetch when the network reconnects.

Returns#

boolean

Inherited from#

QueryObserver.shouldFetchOnReconnect

shouldFetchOnWindowFocus()#

shouldFetchOnWindowFocus(): boolean;

Defined in: packages/query-core/src/queryObserver.ts:148

Returns whether the observed query is currently stale and configured (via the refetchOnWindowFocus option) to refetch when the window regains focus.

Returns#

boolean

Inherited from#

QueryObserver.shouldFetchOnWindowFocus

trackProp()#

trackProp(key): void;

Defined in: packages/query-core/src/queryObserver.ts:350

Records that the given QueryObserverResult property was read, so a subsequent update only notifies this observer if a tracked property actually changed. Normally called indirectly via QueryObserver#trackResult's proxy; exposed directly for adapters that track property access themselves (e.g. through their own reactivity system) instead of via the proxy.

Parameters#

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"

Returns#

void

Inherited from#

QueryObserver.trackProp

trackResult()#

trackResult(result, onPropTracked?): QueryObserverResult<TData, TError>;

Defined in: packages/query-core/src/queryObserver.ts:331

Wraps a QueryObserverResult in a Proxy that records which properties are read, via QueryObserver#trackProp (and an optional onPropTracked callback). Used by framework adapters when notifyOnChangeProps is not set, to implement its default "only re-render on properties you actually read" behavior.

Parameters#

result#

QueryObserverResult<TData, TError>

onPropTracked?#

(key) => void

Returns#

QueryObserverResult<TData, TError>

Inherited from#

QueryObserver.trackResult

updateResult()#

updateResult(): void;

Defined in: packages/query-core/src/queryObserver.ts:735

Recomputes and stores the current result from the current query/options, notifying listeners if it changed. Framework adapters call this right after subscribing to make sure no query update was missed in the gap between creating the observer and subscribing to it.

Returns#

void

Inherited from#

QueryObserver.updateResult