useInfiniteQuery

Call Signature#

function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): DefinedUseInfiniteQueryResult<TData, TError>;

Defined in: preact-query/src/useInfiniteQuery.ts:51

The options for useInfiniteQuery are identical to useQuery, with the addition of queryFn, initialPageParam, getNextPageParam, getPreviousPageParam, and maxPages.

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.

queryClient?#

QueryClient

Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.

Returns#

DefinedUseInfiniteQueryResult<TData, TError>

The same properties as useQuery, with the addition of data.pages, data.pageParams, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage, and isFetchingPreviousPage.

Example#

import { useInfiniteQuery } from '@tanstack/preact-query'

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

  return <>{data.pages.map((page) => page.projects.map((p) => <p key={p.id}>{p.name}</p>))}</>
}

Call Signature#

function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;

Defined in: preact-query/src/useInfiniteQuery.ts:105

The options for useInfiniteQuery are identical to useQuery, with the addition of queryFn, initialPageParam, getNextPageParam, getPreviousPageParam, and maxPages.

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.

queryClient?#

QueryClient

Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.

Returns#

UseInfiniteQueryResult<TData, TError>

The same properties as useQuery, with the addition of data.pages, data.pageParams, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage, and isFetchingPreviousPage.

Example#

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

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

function Projects() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery(projectsOptions)

  return (
    <button
      onClick={() => fetchNextPage()}
      disabled={!hasNextPage || isFetchingNextPage}
    >
      Load More
    </button>
  )
}

Call Signature#

function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;

Defined in: preact-query/src/useInfiniteQuery.ts:163

The options for useInfiniteQuery are identical to useQuery, with the addition of queryFn, initialPageParam, getNextPageParam, getPreviousPageParam, and maxPages.

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.

Type Parameters#

TQueryFnData#

TQueryFnData

TError#

TError = Error

TData#

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey#

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam#

TPageParam = unknown

Parameters#

options#

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

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

queryClient?#

QueryClient

Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.

Returns#

UseInfiniteQueryResult<TData, TError>

The same properties as useQuery, with the addition of data.pages, data.pageParams, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage, and isFetchingPreviousPage.

Example#

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

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

function Projects() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery(projectsOptions)

  return (
    <button
      onClick={() => fetchNextPage()}
      disabled={!hasNextPage || isFetchingNextPage}
    >
      Load More
    </button>
  )
}