TanStack
Query
API Reference

injectInfiniteQuery

Overview

ts
function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn: () => DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, options?: InjectInfiniteQueryOptions): DefinedCreateInfiniteQueryResult<TData, TError>;
function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn: () => UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult<TData, TError>;
function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn: () => CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult<TData, TError>;

See also: Parameters · Returns

Call Signature

ts
function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn: () => DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, options?: InjectInfiniteQueryOptions): DefinedCreateInfiniteQueryResult<TData, TError>;

Defined in: packages/angular-query-experimental/src/inject-infinite-query.ts:85

The options for injectInfiniteQuery are identical to injectQuery, with the addition of initialPageParam, getNextPageParam, getPreviousPageParam, and maxPages. Infinite queries can additively "load more" data onto an existing set of data, or "infinite scroll".

This overload is selected when initialData is set on the options returned by injectInfiniteQueryFn, so the resulting data signal is never undefined (unless a select changes TData to include undefined).

Type Parameters

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

injectInfiniteQueryFn

() => DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

A function returning the DefinedInitialDataInfiniteOptions to use — everything you can pass to injectInfiniteQuery, with initialData set. Similar to computed from Angular, this function runs in the reactive context, so signals read inside it drive the query.

options?

InjectInfiniteQueryOptions

Additional configuration.

Returns

DefinedCreateInfiniteQueryResult<TData, TError>

The same signals as injectQuery, with the addition of fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage, and isFetchingPreviousPage. data().pages and data().pageParams are also added, as long as a select doesn't change TData away from its default InfiniteData<TQueryFnData> shape.

Remarks

Keep in mind that imperative fetch calls, such as fetchNextPage, may interfere with the default refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user actions, or add conditions like hasNextPage() && !isFetching().

See

infiniteQueryOptions to share these options between injectInfiniteQuery and imperative APIs like queryClient.fetchInfiniteQuery.

Example

ts
@Component({
  selector: 'projects',
  template: `
    <!-- `projectsQuery.data()` is never `undefined`, thanks to `initialData` — even if a
    refetch fails, so the list stays visible alongside the error. -->
    <ul>
      @for (page of projectsQuery.data().pages; track $index) {
        @for (project of page.projects; track project.id) {
          <li>{{ project.name }}</li>
        }
      }
    </ul>
  `,
})
export class Projects {
  readonly projectsQuery = injectInfiniteQuery(() => ({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
    initialData: { pages: [], pageParams: [] },
  }))
}

Call Signature

ts
function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn: () => UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult<TData, TError>;

Defined in: packages/angular-query-experimental/src/inject-infinite-query.ts:237

Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key. Infinite queries can additively "load more" data onto an existing set of data, or "infinite scroll".

Type Parameters

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

injectInfiniteQueryFn

() => UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

A function returning the UndefinedInitialDataInfiniteOptions to use — everything you can pass to injectInfiniteQuery. Similar to computed from Angular, this function runs in the reactive context, so signals read inside it drive the query.

options?

InjectInfiniteQueryOptions

Additional configuration.

Returns

CreateInfiniteQueryResult<TData, TError>

The same signals as injectQuery, with the addition of fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage, and isFetchingPreviousPage. data().pages and data().pageParams are also added, as long as a select doesn't change TData away from its default InfiniteData<TQueryFnData> shape.

Remarks

Keep in mind that imperative fetch calls, such as fetchNextPage, may interfere with the default refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user actions, or add conditions like hasNextPage() && !isFetching(). This is the only overload that accepts queryFn: skipToken, shown below.

See

infiniteQueryOptions to share these options between injectInfiniteQuery and imperative APIs like queryClient.fetchInfiniteQuery.

Examples

Fetching the next page from a button click:

ts
@Component({
  selector: 'projects-list',
  template: `
    <ul>
      @for (page of projectsQuery.data()?.pages; track $index) {
        @for (project of page.projects; track project.id) {
          <li>{{ project.name }}</li>
        }
      }
    </ul>
    <button
      [disabled]="!projectsQuery.hasNextPage() || projectsQuery.isFetching()"
      (click)="projectsQuery.fetchNextPage()"
    >
      Load More
    </button>
  `,
})
export class ProjectsList {
  readonly projectsQuery = injectInfiniteQuery(() => ({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  }))
}

Fetching the next page automatically as the user scrolls, using an IntersectionObserver on a sentinel element after the list:

ts
@Component({
  selector: 'projects-list',
  template: `
    <ul>
      @for (page of projectsQuery.data()?.pages; track $index) {
        @for (project of page.projects; track project.id) {
          <li>{{ project.name }}</li>
        }
      }
    </ul>
    <div #sentinel>{{ projectsQuery.isFetchingNextPage() ? 'Loading more...' : '' }}</div>
  `,
})
export class ProjectsList {
  readonly sentinel = viewChild<ElementRef<HTMLElement>>('sentinel')

  readonly projectsQuery = injectInfiniteQuery(() => ({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  }))

  constructor() {
    effect((onCleanup) => {
      const sentinel = this.sentinel()?.nativeElement
      if (
        sentinel == null ||
        !this.projectsQuery.hasNextPage() ||
        this.projectsQuery.isFetching()
      ) {
        return
      }

      const observer = new IntersectionObserver(([entry]) => {
        if (entry?.isIntersecting) this.projectsQuery.fetchNextPage()
      })
      observer.observe(sentinel)

      onCleanup(() => observer.disconnect())
    })
  }
}

A query that's disabled, type safe, until postId is set — pass skipToken as queryFn instead of setting enabled: false:

ts
@Component({
  selector: 'comments',
  template: `
    @if (postId() == null) {
      Select a post
    } @else if (commentsQuery.isPending()) {
      Loading...
    } @else if (commentsQuery.isError()) {
      <span>Error: {{ commentsQuery.error()?.message }}</span>
    } @else {
      <ul>
        @for (page of commentsQuery.data().pages; track $index) {
          @for (comment of page.comments; track comment.id) {
            <li>{{ comment.text }}</li>
          }
        }
      </ul>
    }
  `,
})
export class Comments {
  readonly postId = signal<string | undefined>(undefined)

  readonly commentsQuery = injectInfiniteQuery(() => ({
    queryKey: ['post', this.postId(), 'comments'],
    queryFn:
      this.postId() != null
        ? ({ pageParam }) => fetchComments(this.postId()!, pageParam)
        : skipToken,
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  }))
}

Call Signature

ts
function injectInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(injectInfiniteQueryFn: () => CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, options?: InjectInfiniteQueryOptions): CreateInfiniteQueryResult<TData, TError>;

Defined in: packages/angular-query-experimental/src/inject-infinite-query.ts:264

This overload accepts the general CreateInfiniteQueryOptions shape rather than the initialData-aware overloads above, so whether data is defined can't be inferred from the call site — useful when wrapping injectInfiniteQuery in your own helper function that forwards caller-provided options.

Type Parameters

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

injectInfiniteQueryFn

() => CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

A function that returns infinite query options. Similar to computed from Angular, this function runs in the reactive context, so signals read inside it drive the query.

options?

InjectInfiniteQueryOptions

Additional configuration.

Returns

CreateInfiniteQueryResult<TData, TError>

The infinite query result.

Parameters

injectInfiniteQueryFn

() => CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

A function that returns infinite query options. Similar to computed from Angular, this function runs in the reactive context, so signals read inside it drive the query.

injectInfiniteQueryFn properties

PropertyTypeDefault valueDescription
enabled?| false | true | ((query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => boolean)trueSet this to false or a function that returns false to disable automatic refetching when the query mounts or changes query keys. To refetch the query, use the refetch method returned from the useQuery instance. Accepts a boolean or function that returns a boolean.
gcTime?numberundefinedThe time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. Setting it to Infinity will disable garbage collection. Defaults to 5 * 60 * 1000 (5 minutes), or Infinity during SSR. Note: the maximum allowed time is about 24 days, imposed by setTimeout's 32-bit signed integer delay — see timeoutManager.setTimeoutProvider for a workaround.
getNextPageParam(lastPage: TQueryFnData, allPages: TQueryFnData[], lastPageParam: TPageParam, allPageParams: TPageParam[]) => TPageParam | null | undefinedundefinedThis function can be set to automatically get the next cursor for infinite queries. The result will also be used to determine the value of hasNextPage.
getPreviousPageParam?(firstPage: TQueryFnData, allPages: TQueryFnData[], firstPageParam: TPageParam, allPageParams: TPageParam[]) => TPageParam | null | undefinedundefinedThis function can be set to automatically get the previous cursor for infinite queries. The result will also be used to determine the value of hasPreviousPage.
initialData?| InfiniteData<TQueryFnData, TPageParam> | (() => | InfiniteData<TQueryFnData, TPageParam> | undefined)undefinedIf set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet). If set to a function, the function will be called once during the shared/root query initialization, and be expected to synchronously return the initial data. Initial data is considered stale by default unless a staleTime has been set. initialData is persisted to the cache.
initialDataUpdatedAt?number | (() => number | undefined)undefinedIf set, this value will be used as the time (in milliseconds) of when the initialData itself was last updated.
initialPageParamTPageParamundefinedThe page param to start from when an infinite query has no pages yet. It is passed to queryFn as pageParam for the first page; every page after that gets the value returned by getNextPageParam or getPreviousPageParam. It only applies while the query has no pages: once a first page exists, refetching starts from that page's own param instead.
maxPages?numberundefinedMaximum number of pages to store in the data of an infinite query.
meta?Record<string, unknown>undefinedAdditional payload to be stored on each query. Use this property to pass information that can be used in other places.
networkMode?"online" | "always" | "offlineFirst"'online'Controls whether a query is allowed to run based on the current network connectivity. See Network Mode for more information.
notifyOnChangeProps?| ( | "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" | "fetchNextPage" | "fetchPreviousPage" | "hasNextPage" | "hasPreviousPage" | "isFetchNextPageError" | "isFetchingNextPage" | "isFetchPreviousPageError" | "isFetchingPreviousPage")[] | "all" | (() => | "all" | ( | "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" | "fetchNextPage" | "fetchPreviousPage" | "hasNextPage" | "hasPreviousPage" | "isFetchNextPageError" | "isFetchingNextPage" | "isFetchPreviousPageError" | "isFetchingPreviousPage")[] | undefined)undefinedIf set, the component will only re-render if any of the listed properties change. When set to ['data', 'error'], the component will only re-render when the data or error properties change. When set to 'all', the component will re-render whenever a query is updated. When set to a function, the function will be executed to compute the list of properties. Defaults to undefined, in which case property access is tracked automatically, and the component only re-renders when one of the tracked properties changes.
persister?(queryFn: (context: QueryFunctionContext<NoInfer<TQueryKey>, TPageParam>) => TQueryFnData | Promise<TQueryFnData>, context: object, query: Query) => TQueryFnData | Promise<TQueryFnData>undefinedThis option can be used to persist the result of a query to an external storage, bypassing the need to actually call the queryFn. Useful for persisting a query's data across e.g. server/client boundaries.
placeholderData?| InfiniteData<TQueryFnData, TPageParam> | ((previousData: | InfiniteData<TQueryFnData, TPageParam> | undefined, previousQuery: | Query<InfiniteData<TQueryFnData, TPageParam>, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey> | undefined) => | InfiniteData<TQueryFnData, TPageParam> | undefined)undefinedIf set, this value will be used as the placeholder data for this particular query observer while the query is still in the loading data and no initialData has been provided.
queryFn?| typeof skipToken | ((context: QueryFunctionContext<TQueryKey, TPageParam>) => TQueryFnData | Promise<TQueryFnData>)undefinedThe function that the query will use to request data. Required, unless a default query function has been set via queryClient.setQueryDefaults or queryClient.setDefaultOptions. Receives a QueryFunctionContext. Must return a promise that will either resolve data or throw an error. The data cannot be undefined.
queryHash?stringundefinedThe hashed form of queryKey, computed with queryKeyHashFn (or the default hashing function otherwise). Used as the actual cache key internally.
queryKeyTQueryKey & objectundefinedThe query key to use for this query. The query key will be hashed into a stable hash. See Query Keys for more information. The query will automatically update when this key changes (as long as enabled is not set to false).
queryKeyHashFn?(queryKey: TQueryKey) => stringundefinedIf specified, this function is used to hash the queryKey to a string.
refetchInterval?| number | false | ((query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => number | false | undefined)falseIf set to a number, the query will continuously refetch at this frequency in milliseconds. If set to a function, the function will be executed with the latest data and query to compute a frequency
refetchIntervalInBackground?booleanfalseIf set to true, the query will continue to refetch while their tab/window is in the background.
refetchOnMount?| boolean | "always" | ((query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => boolean | "always")trueIf set to true, the query will refetch on mount if the data is stale. If set to false, will disable additional instances of a query to trigger background refetch. If set to 'always', the query will always refetch on mount (except when staleTime: 'static' is used). If set to a function, the function will be executed with the latest data and query to compute the value
refetchOnReconnect?| boolean | "always" | ((query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => boolean | "always")undefinedIf set to true, the query will refetch on reconnect if the data is stale. If set to false, the query will not refetch on reconnect. If set to 'always', the query will always refetch on reconnect (except when staleTime: 'static' is used). If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to true unless networkMode is 'always'.
refetchOnWindowFocus?| boolean | "always" | ((query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => boolean | "always")trueIf set to true, the query will refetch on window focus if the data is stale. If set to false, the query will not refetch on window focus. If set to 'always', the query will always refetch on window focus (except when staleTime: 'static' is used). If set to a function, the function will be executed with the latest data and query to compute the value.
retry?| number | false | true | ((failureCount: number, error: TError) => boolean)undefinedIf false, failed queries will not retry by default. If true, failed queries will retry infinitely. If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number. If set to a function (failureCount, error) => boolean failed queries will retry until the function returns false. Defaults to 3 on the client and 0 on the server.
retryDelay?number | ((failureCount: number, error: TError) => number)undefinedThis function receives a retryAttempt integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. A function like attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000) applies exponential backoff. A function like attempt => attempt * 1000 applies linear backoff. Defaults to a function that applies exponential backoff, capped at 30 seconds.
retryOnMount?| false | true | ((query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => boolean)trueIf set to false, the query will not be retried on mount if it contains an error. If set to a function, the function will be executed with the query to compute the value.
select?(data: InfiniteData) => TDataundefinedThis option can be used to transform or select a part of the data returned by the query function. It affects the returned data value, but does not affect what gets stored in the query cache. The select function will only run if data changed, or if the reference to the select function itself changes. To optimize, memoize the function so its reference stays stable across calls.
staleTime?| number | "static" | ((query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => number | "static")0The time in milliseconds after data is considered stale. If set to Infinity, the data will never be considered stale. If set to 'static', the data will never be considered stale. If set to a function, the function will be executed with the query to compute a staleTime.
structuralSharing?boolean | ((oldData: unknown, newData: unknown) => unknown)trueSet this to false to disable structural sharing between query results. Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic.
throwOnError?| false | true | ((error: TError, query: Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>) => boolean)falseWhether errors should be thrown instead of setting the error property. If set to true or suspense is true, all errors will be thrown to the error boundary. If set to false and suspense is false, errors are returned as state. If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (true) or return the error as state (false).

options?

InjectInfiniteQueryOptions

Additional configuration.

options properties

PropertyTypeDescription
injector?InjectorThe Injector in which to create the infinite query. If this is not provided, the current injection context will be used instead (via inject).

Returns

CreateInfiniteQueryResult<TData, TError>

The infinite query result.

Result properties

Built from BaseQueryNarrowing, InfiniteQueryObserverBaseResult. See the type above for what it changes.

Edit on GitHub
Functions / infiniteQueryOptions
Functions / injectIsFetching