Fix useLiveQuery loading status in on-demand sync #962
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…sync For live queries using on-demand sync mode, the collection was being marked as ready immediately when source collections were ready, even though the initial loadSubset hadn't completed yet. This meant `isLoading` was false while data was still being fetched. This fix ensures that: 1. Live queries with on-demand sources track the initial loadSubset promise and show `isLoading: true` until it completes 2. The collection status remains `loading` until the first data load finishes 3. Subsequent loadSubset calls (pagination/windowing) do NOT affect the ready status - only the first load matters Changes: - Add `hasMarkedReady` and `hasSetupLoadingListener` flags to track initial ready state in CollectionConfigBuilder - Modify `updateLiveQueryStatus()` to wait for first loadSubset to complete before calling `markReady()` - Update `subscribeToMatchingChanges()` in CollectionSubscriber to track the initial loadSubset promise for on-demand sources - Add comprehensive tests for the new behavior
🦋 Changeset detectedLatest commit: 957d826 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
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 |
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: |
Contributor
|
Size Change: +182 B (+0.21%) Total Size: 88.7 kB
ℹ️ View Unchanged
|
Contributor
|
Size Change: 0 B Total Size: 3.35 kB ℹ️ View Unchanged
|
Update test to wait for the initial loadSubset promise to resolve before checking the live query status. This is needed after the fix that makes live queries show loading status during initial on-demand data fetch.
Closed
…romise: true For on-demand sync mode, the default includeInitialState path calls requestSnapshot with trackLoadSubsetPromise: false, which doesn't track the loading state. This change manually calls requestSnapshot with trackLoadSubsetPromise: true for on-demand sources to ensure the subscription status changes from 'loadingSubset' to 'ready' when data arrives. Also updates query-db-collection tests to use eager mode since they test TanStack Query cache behavior, not on-demand loading status.
samwillis
requested changes
Dec 16, 2025
Collaborator
samwillis
left a comment
samwillis
left a comment
There was a problem hiding this comment.
Looks good, just a couple of things to tweak I think.
| // Set up a one-time listener if we haven't already | ||
| if (!this.hasSetupLoadingListener) { | ||
| this.hasSetupLoadingListener = true | ||
| const unsubscribe = this.liveQueryCollection.on( |
Collaborator
There was a problem hiding this comment.
We should lift up the saved unsubscribe to save it at the top of the collection config builder level, then call it (if it exists) in the collection cleanup function. This is what we do with unsubscribeFromSchedulerClears - we should do the same as that.
Collaborator
There was a problem hiding this comment.
Could we add a test that checks this behaviour for an on-demand collection with a join to another on-demand collection. Check that it only modes to ready when both are not loading subsets.
…loading-status-01TNsEPERmfs3ub3e9iDRAzK
…DRAzK' of http://127.0.0.1:54067/git/TanStack/db into claude/fix-livequery-loading-status-01TNsEPERmfs3ub3e9iDRAzK
…eanup - Move loadingSubset listener unsubscribe to class property `unsubscribeFromLoadingListener` - Add cleanup call in sync cleanup function to prevent memory leaks - Add test verifying live query loading state tracks on-demand source loadSubset
Update react/todo and solid/todo examples to use ^1.0.8 to match other examples and pass sherif workspace version consistency check.
…DRAzK' of http://127.0.0.1:25666/git/TanStack/db into claude/fix-livequery-loading-status-01TNsEPERmfs3ub3e9iDRAzK
Verifies that when a live query joins two on-demand collections, the live query only becomes ready when BOTH sources have completed their loadSubset operations. Uses leftJoin to ensure predictable active/lazy source determination.
…ns in e2e tests On-demand collections mark ready immediately when sync starts, so calling preload() is unnecessary and triggers a warning. Use startSyncImmediate() instead, which starts sync without the no-op preload warning.
…DRAzK' of http://127.0.0.1:42743/git/TanStack/db into claude/fix-livequery-loading-status-01TNsEPERmfs3ub3e9iDRAzK
…Each in e2e tests Cleaning up source collections in afterEach while live queries may still be pending (e.g., if a test times out before cleanup) causes "Source collection was manually cleaned up" warnings. Since on-demand collections don't need to be reset between tests (each test creates its own live queries with specific predicates), we remove the cleanup/restart cycle from afterEach. Final cleanup still happens in teardown (afterAll).
Cancel TanStack Query observers between tests to prevent "operation was canceled" errors from accumulating observers.
Change afterEach cleanup from `await queryClient.cancelQueries()` to `queryClient.removeQueries()` with a predicate that only removes queries with no active observers. This fixes test hanging while preserving live query functionality. The previous approach with cancelQueries() caused tests to hang indefinitely because it waited for queries that never completed. The new approach only removes inactive queries, allowing active subscriptions to continue working. Test results: 109/110 tests passing (1 test has pre-existing timeout issue) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
For live queries using on-demand sync mode, the collection was being marked as ready immediately when source collections were ready, even though the initial loadSubset hadn't completed yet. This meant
isLoadingwas false while data was still being fetched.This fix ensures that:
isLoading: trueuntil it completesloadinguntil the first data load finishesChanges:
hasMarkedReadyandhasSetupLoadingListenerflags to track initial ready state in CollectionConfigBuilderupdateLiveQueryStatus()to wait for first loadSubset to complete before callingmarkReady()subscribeToMatchingChanges()in CollectionSubscriber to track the initial loadSubset promise for on-demand sources🎯 Changes
✅ Checklist
pnpm test:pr.🚀 Release Impact