feat: implement useLiveInfiniteQuery hook for React

[KyleAMathews]

Summary

Implements Phase 1 of RFC #613 (useLiveInfiniteQuery hook for React).

This PR adds a new useLiveInfiniteQuery hook that combines TanStack Query's infinite query pattern with TanStack DB's live query reactivity. The hook provides a familiar API for pagination while automatically updating pages as underlying data changes.

What's Included

• New useLiveInfiniteQuery hook with TanStack Query-compatible API

  • pages: Array of page arrays
  • data: Flattened array of all loaded items
  • pageParams: Array of page parameters used
  • fetchNextPage(): Load the next page
  • hasNextPage: Boolean indicating if more pages are available
  • All useLiveQuery properties (status, isLoading, isReady, etc.)

• Automatic live updates: Pages update reactively when underlying data changes

• Dependency tracking: Resets pagination when query dependencies change

• Comprehensive test suite: 13 tests covering pagination, live updates, and edge cases

Implementation Details

Phase 1 Approach:

• Fetches all matching data from the collection (no server-side pagination yet)
• Uses client-side slicing to create pages
• Works entirely within the collection's current dataset
• This is acceptable for Phase 1 and sets up the API for future phases

Future Phases:

• Phase 2: Add dynamic limit optimization without query recreation
• Phase 3: Integrate with backend fetching via collection events

Example Usage

const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc'),
  {
    pageSize: 20,
    getNextPageParam: (lastPage) => 
      lastPage.length === 20 ? lastPage.length : undefined
  }
)

Test Coverage

All 13 tests passing with 94% statement coverage.

Closes #613

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: 248bdf4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@tanstack/query-db-collection	Patch
@tanstack/db-example-react-todo	Patch

Not sure what this means? Click here to learn what changesets are.

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

[pkg-pr-new]

More templates

• todos
• tanstack-start-db-projects-example
• @tanstack/db-example-react-todo
• @tanstack/db-example-solid-todo

@tanstack/angular-db

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

@tanstack/db

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

@tanstack/db-ivm

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

@tanstack/electric-db-collection

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

@tanstack/query-db-collection

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

@tanstack/react-db

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

@tanstack/rxdb-db-collection

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

@tanstack/solid-db

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

@tanstack/svelte-db

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

@tanstack/trailbase-db-collection

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

@tanstack/vue-db

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

commit: 248bdf4

[github-actions]

Size Change: 0 B

Total Size: 76.9 kB

ℹ️ View Unchanged

Filename	Size
./packages/db/dist/esm/collection/change-events.js	963 B
./packages/db/dist/esm/collection/changes.js	1.01 kB
./packages/db/dist/esm/collection/events.js	660 B
./packages/db/dist/esm/collection/index.js	3.31 kB
./packages/db/dist/esm/collection/indexes.js	1.16 kB
./packages/db/dist/esm/collection/lifecycle.js	1.8 kB
./packages/db/dist/esm/collection/mutations.js	2.52 kB
./packages/db/dist/esm/collection/state.js	3.79 kB
./packages/db/dist/esm/collection/subscription.js	1.83 kB
./packages/db/dist/esm/collection/sync.js	1.68 kB
./packages/db/dist/esm/deferred.js	230 B
./packages/db/dist/esm/errors.js	3.1 kB
./packages/db/dist/esm/index.js	1.58 kB
./packages/db/dist/esm/indexes/auto-index.js	794 B
./packages/db/dist/esm/indexes/base-index.js	835 B
./packages/db/dist/esm/indexes/btree-index.js	2 kB
./packages/db/dist/esm/indexes/lazy-index.js	1.21 kB
./packages/db/dist/esm/indexes/reverse-index.js	577 B
./packages/db/dist/esm/local-only.js	967 B
./packages/db/dist/esm/local-storage.js	2.33 kB
./packages/db/dist/esm/optimistic-action.js	294 B
./packages/db/dist/esm/proxy.js	3.86 kB
./packages/db/dist/esm/query/builder/functions.js	615 B
./packages/db/dist/esm/query/builder/index.js	4.04 kB
./packages/db/dist/esm/query/builder/ref-proxy.js	938 B
./packages/db/dist/esm/query/compiler/evaluators.js	1.55 kB
./packages/db/dist/esm/query/compiler/expressions.js	760 B
./packages/db/dist/esm/query/compiler/group-by.js	2.04 kB
./packages/db/dist/esm/query/compiler/index.js	2.04 kB
./packages/db/dist/esm/query/compiler/joins.js	2.52 kB
./packages/db/dist/esm/query/compiler/order-by.js	1.21 kB
./packages/db/dist/esm/query/compiler/select.js	1.28 kB
./packages/db/dist/esm/query/ir.js	785 B
./packages/db/dist/esm/query/live-query-collection.js	340 B
./packages/db/dist/esm/query/live/collection-config-builder.js	3.03 kB
./packages/db/dist/esm/query/live/collection-subscriber.js	1.92 kB
./packages/db/dist/esm/query/optimizer.js	3.26 kB
./packages/db/dist/esm/SortedMap.js	1.24 kB
./packages/db/dist/esm/transactions.js	3 kB
./packages/db/dist/esm/utils.js	1.01 kB
./packages/db/dist/esm/utils/browser-polyfills.js	365 B
./packages/db/dist/esm/utils/btree.js	6.01 kB
./packages/db/dist/esm/utils/comparison.js	754 B
./packages/db/dist/esm/utils/index-optimization.js	1.73 kB

_{compressed-size-action::db-package-size}

[github-actions]

Size Change: 0 B

Total Size: 1.46 kB

ℹ️ View Unchanged

Filename	Size
./packages/react-db/dist/esm/index.js	152 B
./packages/react-db/dist/esm/useLiveQuery.js	1.31 kB

_{compressed-size-action::react-db-package-size}