createInfiniteQuery

Call Signature#

function createInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: Accessor<DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>, queryClient?: Accessor<QueryClient>): DefinedCreateInfiniteQueryResult<TData, TError>;

Defined in: packages/svelte-query/src/createInfiniteQuery.ts:36

The options for createInfiniteQuery are identical to createQuery, with the addition of initialPageParam, getNextPageParam, getPreviousPageParam, and maxPages.

This overload is selected when initialData is known to be defined.

Type Parameters#

TQueryFnData#

TQueryFnData = unknown

TError#

TError = Error

TData#

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey#

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam#

TPageParam = unknown

Parameters#

options#

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

The DefinedInitialDataInfiniteOptions to use — everything you can pass to createInfiniteQuery, with initialData set, wrapped in an Accessor so options can be reactive.

queryClient?#

Accessor<QueryClient>

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

Returns#

DefinedCreateInfiniteQueryResult<TData, TError>

The current query result, plus fetchNextPage/fetchPreviousPage/hasNextPage/hasPreviousPage to page through the query.

See#

infiniteQueryOptions to share these options between createInfiniteQuery and imperative APIs like queryClient.infiniteQuery.

Call Signature#

function createInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: Accessor<UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>, queryClient?: Accessor<QueryClient>): CreateInfiniteQueryResult<TData, TError>;

Defined in: packages/svelte-query/src/createInfiniteQuery.ts:70

The options for createInfiniteQuery are identical to createQuery, with the addition of initialPageParam, getNextPageParam, getPreviousPageParam, and maxPages.

This overload is selected when initialData is omitted or may be undefined.

Type Parameters#

TQueryFnData#

TQueryFnData = unknown

TError#

TError = Error

TData#

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey#

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam#

TPageParam = unknown

Parameters#

options#

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

The UndefinedInitialDataInfiniteOptions to use — everything you can pass to createInfiniteQuery, wrapped in an Accessor so options can be reactive.

queryClient?#

Accessor<QueryClient>

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

Returns#

CreateInfiniteQueryResult<TData, TError>

The current query result, plus fetchNextPage/fetchPreviousPage/hasNextPage/hasPreviousPage to page through the query.

See#

infiniteQueryOptions to share these options between createInfiniteQuery and imperative APIs like queryClient.infiniteQuery.

Call Signature#

function createInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options: Accessor<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>, queryClient?: Accessor<QueryClient>): CreateInfiniteQueryResult<TData, TError>;

Defined in: packages/svelte-query/src/createInfiniteQuery.ts:185

The options for createInfiniteQuery are identical to createQuery, with the addition of 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#

Accessor<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>

The CreateInfiniteQueryOptions to use — everything you can pass to createInfiniteQuery, wrapped in an Accessor so options can be reactive.

queryClient?#

Accessor<QueryClient>

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

Returns#

CreateInfiniteQueryResult<TData, TError>

The current query result, plus fetchNextPage/fetchPreviousPage/hasNextPage/hasPreviousPage to page through the query.

See#

infiniteQueryOptions to share these options between createInfiniteQuery and imperative APIs like queryClient.infiniteQuery.

Examples#

Fetching the next page from a "Load More" button click:

<script lang="ts">
  import { createInfiniteQuery } from '@tanstack/svelte-query'

  const query = createInfiniteQuery(() => ({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  }))
</script>

{#if query.isPending}
  Loading...
{:else if query.isError}
  <span>Error: {query.error.message}</span>
{:else}
  <ul>
    {#each query.data.pages as page}
      {#each page.projects as project (project.id)}
        <li>{project.name}</li>
      {/each}
    {/each}
  </ul>
  <button
    onclick={() => query.fetchNextPage()}
    disabled={!query.hasNextPage || query.isFetching}
  >
    {query.isFetchingNextPage
      ? 'Loading more...'
      : query.hasNextPage
        ? 'Load More'
        : 'Nothing more to load'}
  </button>
{/if}

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

<script lang="ts">
  import { createInfiniteQuery } from '@tanstack/svelte-query'

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

  let sentinel: HTMLDivElement | undefined = $state()

  $effect(() => {
    if (sentinel == null || !query.hasNextPage || query.isFetching) return

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

    return () => observer.disconnect()
  })
</script>

{#if query.isPending}
  Loading...
{:else if query.isError}
  <span>Error: {query.error.message}</span>
{:else}
  <ul>
    {#each query.data.pages as page}
      {#each page.projects as project (project.id)}
        <li>{project.name}</li>
      {/each}
    {/each}
  </ul>
  <div bind:this={sentinel}></div>
{/if}