Does cursor-based pagination work with on-demand infinite syncing?

[Nick-Motion]

Question

I'm trying to implement infinite scroll using useLiveInfiniteQuery with a collection using syncMode: 'on-demand'. Having trouble understanding how cursor-based pagination should work.

Setup

Collection:

const todosCollection = createCollection(
  queryCollectionOptions<Todo, unknown>({
    id: 'todos',
    queryKey: ['todos'],
    queryClient,
    getKey: (todo) => todo.id,
    syncMode: 'on-demand',
    queryFn: async (ctx) => {
      const { limit, cursor } = ctx.meta?.loadSubsetOptions ?? {}
      return fetchTodos({ limit: limit ?? 50, cursor })
    },
  })
)

Hook:

const result = useLiveInfiniteQuery(
  (q) =>
    q
      .from({ todos: todosCollection })
      .orderBy(({ todos }) => todos.createdAt, 'desc'),
  { pageSize: 50 },
  []
)

Observed Behavior

1. Initial load: queryFn called with limit: 50. Returns 50 items.

2. Peek-ahead: queryFn called again either with limit: 1. Returns 1 item, hasNextPage: true.

3. fetchNextPage called: loadedPageCount goes 1→2, but queryFn is NOT called again.

4. hasNextPage flips to false: dataArray.length (51) > totalItemsRequested (100) is false.

Questions

1. Does cursor-based pagination (PR feat(db,electric,query): separate cursor expressions for flexible pagination #960) work with on-demand syncing?

2. What's the recommended approach for infinite scroll with on-demand collections?

Versions

    "@tanstack/db": "0.5.12",
    "@tanstack/query-db-collection": "1.0.8",
    "@tanstack/react-db": "0.1.56",

[KyleAMathews]

cc @samwillis