Add large-scale SaaS example with live queries

[KyleAMathews]

Summary

Adds a comprehensive example demonstrating TanStack DB with a large-scale SaaS application featuring:

• 1000+ product catalog with live infinite queries
• Advanced filtering (search, categories, ratings, stock status)
• Virtualized scrolling for performance
• OrderBy and where clause support in API layer
• Factory pattern for live query collections with caching
• Route loader preloading for product details

Key Changes

New Example: examples/react/saas-large

• Demonstrates live infinite queries with filtering and sorting
• Uses TanStack Router with loaders for SSR-friendly data fetching
• Implements factory pattern with caching for live query collections
• Shows integration with TanStack Start server functions

API Modifications

• Modified API to serialize orderBy/where as JSON strings (Seroval compatibility)
• Added filtering and sorting logic on server side
• Supports dynamic queries based on user interactions

Documentation

• Added packages/react-db/TODO.md documenting need for createLiveInfiniteQuery API
  • Similar to TanStack Query's prefetchInfiniteQuery
  • Would enable factory pattern and SSR for infinite queries
  • Currently only useLiveQuery supports pre-created collections

Test Plan

• Verify example runs: cd examples/react/saas-large && pnpm install && pnpm dev
• Test filtering works correctly
• Test infinite scrolling loads more products
• Test product detail page preloads data
• Test route navigation between products

Related

This example demonstrates the pattern discussed in the docs and showcases real-world usage of TanStack DB in a production-like scenario.

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: caf492e

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]

More templates

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

@tanstack/angular-db

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

@tanstack/db

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

@tanstack/db-ivm

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

@tanstack/electric-db-collection

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

@tanstack/query-db-collection

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

@tanstack/react-db

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

@tanstack/rxdb-db-collection

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

@tanstack/solid-db

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

@tanstack/svelte-db

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

@tanstack/trailbase-db-collection

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

@tanstack/vue-db

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

commit: 530f664

[github-actions]

Size Change: 0 B

Total Size: 83.6 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	413 B
./packages/db/dist/esm/collection/index.js	3.23 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	2.2 kB
./packages/db/dist/esm/collection/sync.js	2.2 kB
./packages/db/dist/esm/deferred.js	230 B
./packages/db/dist/esm/errors.js	3.57 kB
./packages/db/dist/esm/event-emitter.js	798 B
./packages/db/dist/esm/index.js	1.65 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.21 kB
./packages/db/dist/esm/query/compiler/joins.js	2.65 kB
./packages/db/dist/esm/query/compiler/order-by.js	1.43 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	404 B
./packages/db/dist/esm/query/live/collection-config-builder.js	5.49 kB
./packages/db/dist/esm/query/live/collection-registry.js	233 B
./packages/db/dist/esm/query/live/collection-subscriber.js	2.11 kB
./packages/db/dist/esm/query/optimizer.js	3.26 kB
./packages/db/dist/esm/scheduler.js	1.29 kB
./packages/db/dist/esm/SortedMap.js	1.24 kB
./packages/db/dist/esm/transactions.js	3.05 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: 2.36 kB

ℹ️ View Unchanged

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

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