infiniteQueryOptions

Call Signature#

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

Defined in: vue-query/src/infiniteQueryOptions.ts:99

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, unknown>, TError>

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

See#

useInfiniteQuery to run an infinite query with these options.

Example#

<script setup lang="ts">
import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/vue-query'

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

const { data, isError, error, fetchNextPage } = useInfiniteQuery(projectsOptions)
</script>

Call Signature#

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

Defined in: vue-query/src/infiniteQueryOptions.ts:153

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, so the resulting data is never undefined.

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, unknown>, TError>

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

See#

useInfiniteQuery to run an infinite query with these options.

Example#

<script setup lang="ts">
import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/vue-query'

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

// `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)
</script>