Docs: Add pagination approaches for query collections#1355
Docs: Add pagination approaches for query collections#1355KyleAMathews wants to merge 1 commit intomainfrom
Conversation
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
|
More templates
@tanstack/angular-db
@tanstack/db
@tanstack/db-ivm
@tanstack/electric-db-collection
@tanstack/offline-transactions
@tanstack/powersync-db-collection
@tanstack/query-db-collection
@tanstack/react-db
@tanstack/rxdb-db-collection
@tanstack/solid-db
@tanstack/svelte-db
@tanstack/trailbase-db-collection
@tanstack/vue-db
commit: |
|
Size Change: 0 B Total Size: 93.2 kB ℹ️ View Unchanged
|
|
Size Change: 0 B Total Size: 3.85 kB ℹ️ View Unchanged
|
|
@KyleAMathews i think the scenario with using |
🎯 Changes
Enhanced the "Large Dataset Pagination" documentation section with two comprehensive approaches for handling paginated data in query collections:
Approach 1: Direct Writes with Refetch Prevention - Explains how to use
staleTime: Infinityorenabled: falseto prevent automatic refetches from overwriting manually-appended paginated data via direct writes.Approach 2: On-Demand Sync Mode (Recommended) - Documents the recommended
syncMode: 'on-demand'approach, which automatically manageslimitandoffsetparameters, incorporates them into the query key for separate cache entries per page, and prevents data overwrites across different pagination queries.Added clarifying notes about:
queryFnresults as complete state and why this affects paginationsyncMode: 'on-demand'automatically appends serialized predicate options to query keysqueryKeybuilders to include pagination parameters✅ Checklist
https://claude.ai/code/session_01VPHXyPLB9W8CY4HzpVqXua