infiniteQueryOptions

Overview

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;
function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;
function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;

• DefinedInitialDataInfiniteOptions → DefinedInitialDataInfiniteOptions & QueryKeyWithDataTag: You can generally pass everything to infiniteQueryOptions that you can also pass to useInfiniteQuery. These options can be shared across hooks and imperative APIs such as queryClient.infiniteQuery. options.queryKey is required and is the query key to generate options for.
• UnusedSkipTokenInfiniteOptions → UnusedSkipTokenInfiniteOptions & QueryKeyWithDataTag: You can generally pass everything to infiniteQueryOptions that you can also pass to useInfiniteQuery. These options can be shared across hooks and imperative APIs such as queryClient.infiniteQuery. options.queryKey is required and is the query key to generate options for.
• UndefinedInitialDataInfiniteOptions → UndefinedInitialDataInfiniteOptions & QueryKeyWithDataTag: You can generally pass everything to infiniteQueryOptions that you can also pass to useInfiniteQuery. These options can be shared across hooks and imperative APIs such as queryClient.infiniteQuery. options.queryKey is required and is the query key to generate options for.

See also: Parameters · Returns

Call Signature

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;

Defined in: packages/react-query/src/infiniteQueryOptions.ts:165

You can generally pass everything to infiniteQueryOptions that you can also pass to useInfiniteQuery. These options can be shared across hooks and imperative APIs such as queryClient.infiniteQuery. options.queryKey is required and is the query key to generate options for.

This overload is selected when initialData is set.

Type Parameters

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

options

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

The DefinedInitialDataInfiniteOptions to use — everything you can pass to useInfiniteQuery, with initialData set.

Returns

DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>

The same options object, typed so that queryKey carries the inferred data type.

Remarks

See useInfiniteQuery for examples that fetch further pages, from a button click or automatically as the user scrolls.

See

useInfiniteQuery to run an infinite query with these options.

Example

import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query'

export const projectsOptions = infiniteQueryOptions({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
  initialData: { pages: [], pageParams: [] },
})

function Projects() {
  // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
  // list stays visible alongside the error.
  const { data, isError, error } = useInfiniteQuery(projectsOptions)

  return (
    <div>
      {isError ? <span>Error: {error.message}</span> : null}
      <ul>
        {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}
      </ul>
    </div>
  )
}

Call Signature

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;

Defined in: packages/react-query/src/infiniteQueryOptions.ts:224

You can generally pass everything to infiniteQueryOptions that you can also pass to useInfiniteQuery. These options can be shared across hooks and imperative APIs such as queryClient.infiniteQuery. options.queryKey is required and is the query key to generate options for.

Type Parameters

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

options

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

The UnusedSkipTokenInfiniteOptions to use — everything you can pass to useInfiniteQuery.

Returns

UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>

The same options object, typed so that queryKey carries the inferred data type.

Remarks

See useInfiniteQuery for examples that fetch further pages, from a button click or automatically as the user scrolls.

See

useInfiniteQuery to run an infinite query with these options.

Example

A parameterized factory, so the same options object can be reused per postId:

import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query'

export const commentsOptions = (postId: string) =>
  infiniteQueryOptions({
    queryKey: ['post', postId, 'comments'],
    queryFn: ({ pageParam }) => fetchComments(postId, pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

function Comments({ postId }: { postId: string }) {
  const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId))

  if (isPending) return 'Loading...'
  if (isError) return <span>Error: {error.message}</span>

  return (
    <ul>
      {data.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
    </ul>
  )
}

Call Signature

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;

Defined in: packages/react-query/src/infiniteQueryOptions.ts:283

You can generally pass everything to infiniteQueryOptions that you can also pass to useInfiniteQuery. These options can be shared across hooks and imperative APIs such as queryClient.infiniteQuery. options.queryKey is required and is the query key to generate options for.

Type Parameters

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

options

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

The UndefinedInitialDataInfiniteOptions to use — everything you can pass to useInfiniteQuery.

Returns

UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>

The same options object, typed so that queryKey carries the inferred data type.

Remarks

See useInfiniteQuery for examples that fetch further pages (from a button click or automatically as the user scrolls) and that use skipToken to disable the query until postId is set.

See

useInfiniteQuery to run an infinite query with these options.

Example

A parameterized factory, so the same options object can be reused per postId:

import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query'

export const commentsOptions = (postId: string) =>
  infiniteQueryOptions({
    queryKey: ['post', postId, 'comments'],
    queryFn: ({ pageParam }) => fetchComments(postId, pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

function Comments({ postId }: { postId: string }) {
  const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId))

  if (isPending) return 'Loading...'
  if (isError) return <span>Error: {error.message}</span>

  return (
    <ul>
      {data.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
    </ul>
  )
}

Parameters

options

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

The UndefinedInitialDataInfiniteOptions to use — everything you can pass to useInfiniteQuery.

options properties

Built from UseInfiniteQueryOptions. See the type above for what it changes.

Returns

UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>

The same options object, typed so that queryKey carries the inferred data type.

Result properties

Built from UseInfiniteQueryOptions, QueryKeyWithDataTag. See the type above for what it changes.