Skip to content

Docs: Add pagination approaches for query collections#1355

Open
KyleAMathews wants to merge 1 commit intomainfrom
claude/pagination-limit-docs-VQMr2
Open

Docs: Add pagination approaches for query collections#1355
KyleAMathews wants to merge 1 commit intomainfrom
claude/pagination-limit-docs-VQMr2

Conversation

@KyleAMathews
Copy link
Collaborator

🎯 Changes

Enhanced the "Large Dataset Pagination" documentation section with two comprehensive approaches for handling paginated data in query collections:

  1. Approach 1: Direct Writes with Refetch Prevention - Explains how to use staleTime: Infinity or enabled: false to prevent automatic refetches from overwriting manually-appended paginated data via direct writes.

  2. Approach 2: On-Demand Sync Mode (Recommended) - Documents the recommended syncMode: 'on-demand' approach, which automatically manages limit and offset parameters, incorporates them into the query key for separate cache entries per page, and prevents data overwrites across different pagination queries.

Added clarifying notes about:

  • How query collections treat queryFn results as complete state and why this affects pagination
  • How syncMode: 'on-demand' automatically appends serialized predicate options to query keys
  • The responsibility of function-based queryKey builders to include pagination parameters

✅ Checklist

  • This change is docs-only (no release).

https://claude.ai/code/session_01VPHXyPLB9W8CY4HzpVqXua

The previous example showed using writeInsert/writeBatch to load
additional pages but didn't explain that queryFn refetches would wipe
out directly-written data (due to Full State Sync behavior), or that
syncMode: 'on-demand' automatically handles pagination query keys.

Added two approaches: (1) direct writes with staleTime: Infinity to
prevent refetch, and (2) on-demand sync mode which automatically
incorporates limit/offset into query keys for proper cache separation.

https://claude.ai/code/session_01VPHXyPLB9W8CY4HzpVqXua
@changeset-bot
Copy link

changeset-bot bot commented Mar 12, 2026

⚠️ No Changeset found

Latest commit: a603977

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 12, 2026

More templates

@tanstack/angular-db

npm i https://pkg.pr.new/@tanstack/angular-db@1355

@tanstack/db

npm i https://pkg.pr.new/@tanstack/db@1355

@tanstack/db-ivm

npm i https://pkg.pr.new/@tanstack/db-ivm@1355

@tanstack/electric-db-collection

npm i https://pkg.pr.new/@tanstack/electric-db-collection@1355

@tanstack/offline-transactions

npm i https://pkg.pr.new/@tanstack/offline-transactions@1355

@tanstack/powersync-db-collection

npm i https://pkg.pr.new/@tanstack/powersync-db-collection@1355

@tanstack/query-db-collection

npm i https://pkg.pr.new/@tanstack/query-db-collection@1355

@tanstack/react-db

npm i https://pkg.pr.new/@tanstack/react-db@1355

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/@tanstack/rxdb-db-collection@1355

@tanstack/solid-db

npm i https://pkg.pr.new/@tanstack/solid-db@1355

@tanstack/svelte-db

npm i https://pkg.pr.new/@tanstack/svelte-db@1355

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/@tanstack/trailbase-db-collection@1355

@tanstack/vue-db

npm i https://pkg.pr.new/@tanstack/vue-db@1355

commit: e8951b0

@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 93.2 kB

ℹ️ View Unchanged
Filename Size
./packages/db/dist/esm/collection/change-events.js 1.39 kB
./packages/db/dist/esm/collection/changes.js 1.22 kB
./packages/db/dist/esm/collection/events.js 388 B
./packages/db/dist/esm/collection/index.js 3.32 kB
./packages/db/dist/esm/collection/indexes.js 1.1 kB
./packages/db/dist/esm/collection/lifecycle.js 1.75 kB
./packages/db/dist/esm/collection/mutations.js 2.34 kB
./packages/db/dist/esm/collection/state.js 3.49 kB
./packages/db/dist/esm/collection/subscription.js 3.71 kB
./packages/db/dist/esm/collection/sync.js 2.41 kB
./packages/db/dist/esm/deferred.js 207 B
./packages/db/dist/esm/errors.js 4.83 kB
./packages/db/dist/esm/event-emitter.js 748 B
./packages/db/dist/esm/index.js 2.72 kB
./packages/db/dist/esm/indexes/auto-index.js 742 B
./packages/db/dist/esm/indexes/base-index.js 766 B
./packages/db/dist/esm/indexes/btree-index.js 2.17 kB
./packages/db/dist/esm/indexes/lazy-index.js 1.1 kB
./packages/db/dist/esm/indexes/reverse-index.js 538 B
./packages/db/dist/esm/local-only.js 808 B
./packages/db/dist/esm/local-storage.js 2.1 kB
./packages/db/dist/esm/optimistic-action.js 359 B
./packages/db/dist/esm/paced-mutations.js 496 B
./packages/db/dist/esm/proxy.js 3.75 kB
./packages/db/dist/esm/query/builder/functions.js 733 B
./packages/db/dist/esm/query/builder/index.js 4.1 kB
./packages/db/dist/esm/query/builder/ref-proxy.js 1.05 kB
./packages/db/dist/esm/query/compiler/evaluators.js 1.43 kB
./packages/db/dist/esm/query/compiler/expressions.js 430 B
./packages/db/dist/esm/query/compiler/group-by.js 2.23 kB
./packages/db/dist/esm/query/compiler/index.js 2.05 kB
./packages/db/dist/esm/query/compiler/joins.js 2.11 kB
./packages/db/dist/esm/query/compiler/order-by.js 1.45 kB
./packages/db/dist/esm/query/compiler/select.js 1.09 kB
./packages/db/dist/esm/query/expression-helpers.js 1.43 kB
./packages/db/dist/esm/query/ir.js 673 B
./packages/db/dist/esm/query/live-query-collection.js 360 B
./packages/db/dist/esm/query/live/collection-config-builder.js 5.55 kB
./packages/db/dist/esm/query/live/collection-registry.js 264 B
./packages/db/dist/esm/query/live/collection-subscriber.js 2.42 kB
./packages/db/dist/esm/query/live/internal.js 145 B
./packages/db/dist/esm/query/optimizer.js 2.62 kB
./packages/db/dist/esm/query/predicate-utils.js 2.97 kB
./packages/db/dist/esm/query/query-once.js 359 B
./packages/db/dist/esm/query/subset-dedupe.js 927 B
./packages/db/dist/esm/scheduler.js 1.3 kB
./packages/db/dist/esm/SortedMap.js 1.3 kB
./packages/db/dist/esm/strategies/debounceStrategy.js 247 B
./packages/db/dist/esm/strategies/queueStrategy.js 428 B
./packages/db/dist/esm/strategies/throttleStrategy.js 246 B
./packages/db/dist/esm/transactions.js 2.9 kB
./packages/db/dist/esm/utils.js 924 B
./packages/db/dist/esm/utils/browser-polyfills.js 304 B
./packages/db/dist/esm/utils/btree.js 5.61 kB
./packages/db/dist/esm/utils/comparison.js 952 B
./packages/db/dist/esm/utils/cursor.js 457 B
./packages/db/dist/esm/utils/index-optimization.js 1.51 kB
./packages/db/dist/esm/utils/type-guards.js 157 B

compressed-size-action::db-package-size

@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 3.85 kB

ℹ️ View Unchanged
Filename Size
./packages/react-db/dist/esm/index.js 225 B
./packages/react-db/dist/esm/useLiveInfiniteQuery.js 1.32 kB
./packages/react-db/dist/esm/useLiveQuery.js 1.34 kB
./packages/react-db/dist/esm/useLiveSuspenseQuery.js 559 B
./packages/react-db/dist/esm/usePacedMutations.js 401 B

compressed-size-action::react-db-package-size

@fmal
Copy link

fmal commented Mar 12, 2026

@KyleAMathews i think the scenario with using on-demand query collection and pushing down limit and offset parameters by driving offset-based pagination through useLiveInfiniteQuery hook is currently broken due to #820

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants