Query Reference

@svelte-lean/query/infinite

./infinite experimental

createInfinite(): a "load more" list. Each page is an ordinary cache entry, so pages fail, refetch and are evicted one by one, and only the head page polls.

Markdown version of this page, for assistants (Markdown for AI)

Note ./infinite is experimental: the API can still change in a minor release. Stability per entry point: Entry points.

On this page

Import

import

import { createInfinite } from '@svelte-lean/query/infinite';

Usage

team-members.svelte

<script lang="ts">
	import { createInfinite } from '@svelte-lean/query/infinite';
	import { listMembers } from '$api/members';

	let { team }: { team: string } = $props();
	const members = createInfinite(listMembers, () => ({ team }), { perPage: 50 });
</script>

<ul>
	{#each members.rows as member (member.id)}<li>{member.name}</li>{/each}
</ul>
{#if members.hasMore}
	<button disabled={members.loadingMore} onclick={() => members.loadMore()}>More</button>
{/if}

Size

Production Vite builds of a small consumer entry, Svelte external. A marginal row is the bytes the entry adds over the row it names.

Build	Over	gzip	brotli	Budget (gzip)
`infinite (marginal)`	`query`	1648 B	1502 B	1800 B

Read from packages/query/artifacts/size.json. Every entry and its method: Performance.

Functions

One binding over a page() endpoint.

Exports

Runtime exports of the entry.

Name	Type	Default	Description
# `createInfinite`	`(endpoint: QueryEndpoint<P, Page<T>>, params: () => P \| undefined \| null, options?: InfiniteOptions) => InfiniteResult<T>`	–	Walks pages 1..n; each page's params are the params plus the profile's pageParams.

Options

InfiniteOptions, the third argument of createInfinite().

InfiniteOptions

All optional.

Name	Type	Default	Description
# `perPage`	`number`	`20`	The page size.
# `when`	`boolean \| (() => boolean)`	–	A state condition: pauses the walk and polling, keeps rows.
# `keepPrevious`	`boolean`	`false`	Keep the rows of the previous params (a picker passes true).
# `maxPages`	`number`	`none`	A hard cap on the walk.
# `poll`	`PollOption \| (() => PollOption)`	–	Polls the head page only.
# `shift`	`'refetch' \| 'carry'`	`'refetch'`	What a head refresh with new rows does to deeper pages.
# `fresh`	`Duration`	–	Per-use freshness.

Result

InfiniteResult, what createInfinite() returns.

InfiniteResult

Head-page fields describe the first page; the others the whole walk.

Name	Type	Default	Description
# `rows`	`T[]`	–	Pages 1..n in order, each row id kept at its first occurrence.
# `pages`	`number`	–	Pages walked.
# `hasMore`	`boolean`	–	Another page exists.
# `total`	`number \| undefined`	–	The head paginator's total; undefined for bare lists.
# `error`	`QueryError \| undefined`	–	The first error in walk order.
# `moreError`	`QueryError \| undefined`	–	The deepest page failed with no data; loadMore() retries it.
# `loading`	`boolean`	–	The head page is loading for the user.
# `loadingMore`	`boolean`	–	The deepest page has no data and is fetching.
# `refreshing`	`boolean`	–	Any page is refreshing quietly.
# `busy`	`boolean`	–	loading, loadingMore or refreshing.
# `blocked`	`Blocked \| undefined`	–	Of the head page; loadMore() sends nothing while set.
# `info`	`QueryInfo`	–	The head page's info: status, placeholder (the rows belong to the previous params), stale, slow, updatedAt, fetch.
# `loadMore`	`() => Promise<void>`	–	Walk one page further.
# `refetch`	`() => Promise<void>`	–	Every walked page, in parallel, cause user.

Guide

How to use it, with examples: Lists. All entry points: Svelte Lean Query.