Skip to content

Conversation

byudaniel
Copy link
Contributor

There is a race condition where data may be loaded into a collection before the subscribeChanges(() => {}) is called, so useLiveQuery does not emit the initial data. This change checks if the collection is ready and will immediately call onStoreChanges(), so that the initial data is rendered.

Example:

export const vehicleDocumentCollection = createCollection({
  getKey: (item) => item.id,
  schema: vehicleDocumentSchema,
  sync: {
    sync: async ({ begin, commit, write, markReady }) => {
      begin()
      for (const doc of docResponse.documents) {
        write({ type: 'insert', value: doc })
      }

      // Initial data is not displayed, `isLoading` is stuck at true, `isReady` is stuck at false 
      await new Promise((resolve) => setTimeout(resolve, 0))
     // Initial data is displayed, `isLoading: false, isReady: true`
     // await new Promise((resolve) => setTimeout(resolve, 1000))

      commit()

      markReady()
    }
  }
})

I believe this will resolve #483 and #437.

Copy link

changeset-bot bot commented Sep 2, 2025

🦋 Changeset detected

Latest commit: b029a97

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@tanstack/react-db Patch

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

Copy link

pkg-pr-new bot commented Sep 3, 2025

More templates

@tanstack/db

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

@tanstack/db-ivm

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

@tanstack/electric-db-collection

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

@tanstack/query-db-collection

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

@tanstack/react-db

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

@tanstack/solid-db

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

@tanstack/svelte-db

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

@tanstack/trailbase-db-collection

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

@tanstack/vue-db

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

commit: b029a97

Copy link
Collaborator

@samwillis samwillis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great, thanks @byudaniel

I tried to create a test that reproduces this race condition and its proving very hard outside of a browser environment. The code that triggers this in the browser is actually very close to the code in many of our tests, but in the browser React DOM does concurrent rendering where snapshot microtasks can cause reordering of the initial state being processed.

I have validated that this does fix both your reproduction and that from @obeattie in the browser.

I'm going to merge this without a test reproducing the bug, but file an issue to add Playwright tests to the react package.

@samwillis samwillis merged commit d6f9243 into TanStack:main Sep 3, 2025
6 checks passed
@github-actions github-actions bot mentioned this pull request Sep 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

query doesn't refresh when queryFn does an immediate return

2 participants