solid-db useLiveQuery breaks with where + orderBy

[LQR471814]

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

Describe the bug

When using the same useLiveQuery with a where and orderBy clause in multiple components, query logic tends to break.

To Reproduce
Steps to reproduce the behavior:

1. Clone this repo
2. pnpm install && pnpm dev
3. Go to localhost:3000
4. Click the decrement all button a few times, then click the change name button a few times, UI should break unexpectedly.

Expected behavior

• The DB stores a list of items, each with an index, independent UUID (which is used as the key), and name.
• The UI contains 4 identical <List> components, each one has a useLiveQuery that views the list of items whose indices are between 1 and 4 inclusive. It then sorts the list items.
• Clicking on decrement all in the UI will decrement each item's index value and should update the list displays accordingly.
• Clicking on change name in the UI will add a + at the end of each item's name, it should update the list displays accordingly.

Screenshots

Initial state.

After clicking on decrement all once.

After clicking on decrement all and change name a few times.

Desktop (please complete the following information):

• OS: 25.11.20260113.2c3e5ec (Xantusia)
• Browser: Firefox
• Version: 146.0.1

Additional context

• I am not well-versed in the internals of Tanstack DB but I believe this is a solid-db specific issue, as it seems like the collection itself is internally consistent, collection.subscribeChanges also fires events correctly, and generally, everything outside of useLiveQuery works appropriately.
• I also have a more complex environment where I am using @tanstack/solid-db and again, the failure seems to be concentrated within the useLiveQuery, synchronization mechanism. If I replace useLiveQuery with a manual setState(Array.from(collection.entries())), everything updates correctly.
• orderBy works fine without where.
• where works without orderBy.
• All logic works if I only have 1 <List> component.

[kevin-dp]

/reproduce

[claude]

Investigation Summary

I've investigated this issue and created comprehensive tests to reproduce the reported behavior in #1226.

Tests Created

The test file covers scenarios described in the issue:

• Multiple useLiveQuery hooks using the same query with where + orderBy + limit
• Items moving in/out of filter range when updated (simulating "decrement all")
• Name updates that don't affect filtering (simulating "change name")
• Rapid consecutive updates
• Actual Solid components rendering with <For>
• Interleaved updates to stress-test synchronization

Current Status

All tests pass, which suggests one of the following:

1. Environment-specific: The issue may be browser-specific or related to how Solid's reactive system schedules updates in the browser vs test environment
2. Timing-dependent: The issue may require specific microtask/animation frame timing that's not captured in unit tests
3. Missing conditions: There may be additional conditions in your reproduction that aren't captured

Technical Analysis

I examined the useLiveQuery implementation and the underlying @tanstack/db code. The architecture appears sound:

• Each useLiveQuery call creates its own createLiveQueryCollection
• Each live query collection has independent state management
• The reconcile function from Solid.js is used for efficient updates
• Change subscriptions include proper deduplication via sentKeys tracking

Request for Clarification

To help reproduce this issue, could you provide:

1. The exact versions of @tanstack/solid-db and @tanstack/db you're using
2. The exact component code from your reproduction repo (I couldn't access the GitHub repo directly)
3. Is the issue consistent or intermittent? Does it happen every time or only sometimes?
4. Console logs: Do you see any errors or warnings in the browser console?
5. Browser DevTools: Does the underlying collection data look correct? (You mentioned collection.subscribeChanges fires correctly)

The PR with tests is available for review: #1226

[LQR471814]

1. These are the relevant dependency versions:

    "@tanstack/query-db-collection": "^1.0.22",
    "@tanstack/solid-db": "^0.2.5",
    "@tanstack/solid-query": "^5.90.23",
    "solid-js": "^1.9.5",
    "zod": "^4.3.6"

2. This is the code. The rest is a standard solid-js app created with Vite.

// src/App.tsx
import { type Component, For, createEffect } from "solid-js";
import {
  createCollection,
  useLiveQuery,
  and,
  gte,
  lte,
} from "@tanstack/solid-db";
import { z } from "zod";
import { queryCollectionOptions } from "@tanstack/query-db-collection";
import { queryClient } from "./util";

const schema = z.object({
  id: z.string(),
  name: z.string(),
  index: z.number(),
});

let db: z.infer<typeof schema>[] = [];

for (let i = 0; i < 10; i++) {
  db.push({
    id: crypto.randomUUID(),
    name: `some item (originally ${i})`,
    index: i,
  });
}

const fooCollection = createCollection(
  queryCollectionOptions({
    queryClient,
    queryKey: ["all"],
    queryFn: () => {
      return Promise.resolve(db);
    },
    getKey: (v) => v.id,
    schema,
    async onUpdate({ transaction }) {
      for (const { key, changes } of transaction.mutations) {
        const idx = db.findIndex((v) => v.id === key);
        if (idx < 0) {
          throw new Error("unknown value");
        }
        const newValue = { ...db[idx], ...changes };
        db = [...db.slice(0, idx), newValue, ...db.slice(idx + 1)];
      }
      console.table(db);
    },
  }),
);

const List: Component = () => {
  const results = useLiveQuery((q) =>
    q
      .from({ foo: fooCollection })
      .where(({ foo }) => and(gte(foo.index, 1), lte(foo.index, 4)))
      .orderBy(({ foo }) => foo.index),
  );
  // createEffect(() => {
  //   console.table(Array.from(results()));
  // });
  return (
    <div>
      <For each={results()}>
        {(e) => (
          <div>
            {e.index}. {e.name}
          </div>
        )}
      </For>
      <button
        onClick={async () => {
          const result = fooCollection.update(
            db.map((v) => v.id),
            (values) => {
              for (const v of values) {
                v.index--;
                console.log("decremented", v);
              }
            },
          );
          await result.isPersisted.promise;
        }}
      >
        decrement all items
      </button>
      <button
        onClick={async () => {
          const result = fooCollection.update(
            db.map((v) => v.id),
            (values) => {
              for (const v of values) {
                v.name += "+";
              }
            },
          );
          await result.isPersisted.promise;
        }}
      >
        change names
      </button>
    </div>
  );
};

function App() {
  return (
    <div>
      <List />
      <List />
      <List />
      <List />
    </div>
  );
}

export default App;

// src/index.tsx
/* @refresh reload */
import { render } from "solid-js/web";
import "solid-devtools";
import { QueryClientProvider } from "@tanstack/solid-query";

import App from "./App";
import { queryClient } from "./util";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
  );
}

render(
  () => (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  ),
  root!,
);

// src/util.ts
import { QueryClient } from "@tanstack/solid-query";

export const queryClient = new QueryClient();

3. The issue happens every time.
4. No errors or warnings occur.
5. The underlying collection works properly.