Preloading not working for on-demand queries

[Raj1v]

minimal_repo.zip

• I've validated the bug against the latest version of DB packages

Describe the bug

When using syncMode: "on-demand" with a query collection, calling:

1. liveQuery.preload()
2. liveQuery.stateWhenReady()

returns immediately with 0 items, even though the fetch has been triggered.

The stateWhenReady() promise resolves before the data actually arrives.

---

To Reproduce

1. Create a query collection with syncMode: "on-demand"
2. Create a live query collection from it
3. Call await liveQuery.preload()
4. Call await liveQuery.stateWhenReady()
5. Check state.size — it's 0 even though queryFn was called

Minimal reproduction:

const postsCollection = createCollection(
  queryCollectionOptions({
    queryKey: ["posts"],
    queryFn: async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts");
      return res.json();
    },
    syncMode: "on-demand",
    queryClient,
    getKey: (item) => item.id,
  })
);

const posts = createLiveQueryCollection({
  query: (q) =>
    q
      .from({ post: postsCollection })
      .where(({ post }) => eq(post.userId, 1))
      .orderBy(({ post }) => post.id, "asc")
      .limit(10),
});

await posts.preload();

const state = await posts.stateWhenReady();
console.log(state.size); // ❌ 0 (expected: 10)

await sleep(2000);

const state2 = await posts.stateWhenReady();
console.log(state2.size); // ✅ 10 (data arrived after waiting)

[gahabeen]

For those experiencing the exact same issue, here is a hacky workaround to wait for the subset to load:

// await  the next changes coming to this live collection
await new Promise((resolve) => collection.subscribeChanges((changes) => changes.length && resolve(true), { includeInitialState: true }))

in the context of the example shared by @Raj1v:

const postsCollection = createCollection(
  queryCollectionOptions({
    queryKey: ["posts"],
    queryFn: async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts");
      return res.json();
    },
    syncMode: "on-demand",
    queryClient,
    getKey: (item) => item.id,
  })
);

const posts = createLiveQueryCollection({
  query: (q) =>
    q
      .from({ post: postsCollection })
      .where(({ post }) => eq(post.userId, 1))
      .orderBy(({ post }) => post.id, "asc")
      .limit(10),
});

await new Promise((resolve) => posts.subscribeChanges((changes) => changes.length && resolve(true), { includeInitialState: true }))

Hope that helps before it gets fixed & merged.

[gahabeen]

Following up with our discussion in Discord @KyleAMathews, here is an additional quick reproduction file to test this bug.
https://github.com/gahabeen/tanstack-db-repro/blob/issue/preload-subset-query/cases/preload-subset-query.ts

[Raj1v]

I never got back to trying this again, but I was under the assumption that #1081 fixed it. Is that not the case? @gahabeen

[gahabeen]

I never got back to trying this again, but I was under the assumption that #1081 fixed it. Is that not the case? @gahabeen

I don't believe it did 🤔 (see single reproducible example, very similar to yours).

(I've since then understood that using the react implementation with useLiveQuery for all of our tests was the way to circumvent this issue - and also has the benefits of better matching our implementation in the frontend anyway)

[kevin-dp]

I'm closing this as i believe it's fixed by #1081 + #1192. If this issue persists, feel free to re-open this issue.