From a78ec9e3a8d7a824e5ce15a9562e8aec46035c95 Mon Sep 17 00:00:00 2001 From: melvinhagberg Date: Fri, 30 Jan 2026 10:26:12 +0100 Subject: [PATCH] fix(react-db): include peek-ahead item in useLiveInfiniteQuery initial query The initial query was fetching exactly `pageSize` items, but the peek-ahead logic requires `pageSize + 1` to determine if more pages exist. This mismatch caused `hasNextPage` to incorrectly return `false` on initial load when using SQLite predicate push-down with `syncMode: "on-demand"`. The issue occurred because: 1. Initial query loaded exactly `pageSize` items (e.g., 50) 2. `setWindow({ limit: pageSize + 1 })` tried to access the peek-ahead item 3. The item didn't exist yet, and lazy loading had timing issues 4. `hasNextPage` was incorrectly `false` even when more data existed The fix aligns the initial query limit with what `setWindow` expects, fetching `pageSize + 1` items upfront. The extra item is only used internally for the `hasNextPage` check - the returned `data` is still sliced to `pageSize` items via the existing useMemo logic. Co-Authored-By: Claude Opus 4.5 --- .changeset/fix-infinite-query-peek-ahead.md | 7 +++++++ packages/react-db/src/useLiveInfiniteQuery.ts | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 .changeset/fix-infinite-query-peek-ahead.md diff --git a/.changeset/fix-infinite-query-peek-ahead.md b/.changeset/fix-infinite-query-peek-ahead.md new file mode 100644 index 000000000..1a6811e82 --- /dev/null +++ b/.changeset/fix-infinite-query-peek-ahead.md @@ -0,0 +1,7 @@ +--- +"@tanstack/react-db": patch +--- + +fix(react-db): include peek-ahead item in useLiveInfiniteQuery initial query + +The initial query was fetching exactly `pageSize` items, but the peek-ahead logic requires `pageSize + 1` to determine if more pages exist. This caused `hasNextPage` to incorrectly return `false` on initial load when using SQLite predicate push-down with `syncMode: "on-demand"`. diff --git a/packages/react-db/src/useLiveInfiniteQuery.ts b/packages/react-db/src/useLiveInfiniteQuery.ts index 405ecb583..3f4d74705 100644 --- a/packages/react-db/src/useLiveInfiniteQuery.ts +++ b/packages/react-db/src/useLiveInfiniteQuery.ts @@ -184,10 +184,11 @@ export function useLiveInfiniteQuery( // Create a live query with initial limit and offset // Either pass collection directly or wrap query function + // Use pageSize + 1 for the initial limit to include the peek-ahead item const queryResult = isCollection ? useLiveQuery(queryFnOrCollection) : useLiveQuery( - (q) => queryFnOrCollection(q).limit(pageSize).offset(0), + (q) => queryFnOrCollection(q).limit(pageSize + 1).offset(0), deps, )