Skip to content

fix(solid-db): set key option to $key when calling reconcile#1598

Open
Leonabcd123 wants to merge 9 commits into
TanStack:mainfrom
Leonabcd123:fix/solid-db-id-rendering
Open

fix(solid-db): set key option to $key when calling reconcile#1598
Leonabcd123 wants to merge 9 commits into
TanStack:mainfrom
Leonabcd123:fix/solid-db-id-rendering

Conversation

@Leonabcd123

@Leonabcd123 Leonabcd123 commented Jun 18, 2026

Copy link
Copy Markdown

Fixes #1524.

🎯 Changes

Add key option when calling reconcile which is set to $key, which makes it so items are matched correctly even when the id property doesn't exist.

✅ Checklist

  • I have tested this code locally with pnpm test.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Bug Fixes

    • Fixed useLiveQuery reconciliation so list items are matched using the correct key field, preventing incorrect item reuse during updates and reordering.
  • Tests

    • Added a new test covering useLiveQuery with a custom item key, confirming that sorted results update to the expected order after an in-collection change.

@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

syncDataFromCollection in useLiveQuery.ts now passes { key: "$key" } explicitly to reconcile when producing the updated data array. A new test verifies correct DOM order after an item update causes a reorder. A patch changeset entry documents the fix.

Changes

useLiveQuery reconciliation fix

Layer / File(s) Summary
reconcile key fix, reorder test, and changeset
packages/solid-db/src/useLiveQuery.ts, packages/solid-db/tests/useLiveQuery.test.tsx, .changeset/solid-id-rendering.md
syncDataFromCollection now passes { key: "$key" } to reconcile so items are matched by identity across updates. A new test exercises a collection with a custom _id key, asserts the initial DOM order, updates an item's name to trigger a reorder, and asserts the new DOM order. A patch changeset entry records the fix.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • samwillis

Poem

A rabbit hopped through Solid's grove,
Where keys were lost and items rove.
"$key" now anchors every name,
Reordering items? Tamed and tame.
The tests confirm what logic shows—
Each item matched wherever it goes! 🐇✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: setting the key option to $key when calling reconcile to fix a data matching issue.
Description check ✅ Passed The PR description comprehensively covers the changes, motivation, testing, and release impact with all checklist items addressed as required by the template.
Linked Issues check ✅ Passed All code changes directly address the requirements from #1524: the reconcile function now uses key: $key to match items correctly regardless of custom key property names like _id.
Out of Scope Changes check ✅ Passed All changes are scoped to fixing issue #1524: a one-line fix in useLiveQuery.ts, a targeted test validating the custom id field scenario, and a documentation changeset. No extraneous modifications present.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Leonabcd123 Leonabcd123 changed the title fix(solid-db): set key property for reconciliation fix(solid-db): set key option to $key when calling reconcile Jun 18, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/solid-id-rendering.md:
- Line 5: The release note in the changeset file contains two typos that need
correction on line 5: the phrase "that that" appears as a duplicate word and
should be simplified to "that", and the word "reconcilation" is misspelled and
should be corrected to "reconciliation". Update the text to fix both instances
so the release note reads clearly and professionally.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e433e653-ee95-4104-8db2-eb84d69e6a44

📥 Commits

Reviewing files that changed from the base of the PR and between 00389a4 and 31933e0.

📒 Files selected for processing (3)
  • .changeset/solid-id-rendering.md
  • packages/solid-db/src/useLiveQuery.ts
  • packages/solid-db/tests/useLiveQuery.test.tsx

Comment thread .changeset/solid-id-rendering.md Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/solid-db/tests/useLiveQuery.test.tsx (1)

2609-2639: ⚠️ Potential issue | 🟠 Major

Wrap useLiveQuery in a managed reactive root to avoid leaked subscriptions.

This test directly instantiates useLiveQuery without a reactive owner context. In Solid.js, effects and signals created by useLiveQuery must be disposed properly to prevent subscription leakage between tests. Use renderHook (the established pattern throughout this file) or createRoot with cleanup to ensure proper lifecycle management.

Suggested fix
-  const query = useLiveQuery((q) =>
-    q
-      .from({ items: collection })
-      .orderBy(({ items }) => items.name, `asc`),
-  )
+  const rendered = renderHook(() =>
+    useLiveQuery((q) =>
+      q
+        .from({ items: collection })
+        .orderBy(({ items }) => items.name, `asc`),
+    ),
+  )

   await waitFor(() => {
-    expect(query.isReady).toBe(true)
+    expect(rendered.result.isReady).toBe(true)
   })

   expect(
-    Array.from(query()).map((item) => item.name),
+    Array.from(rendered.result()).map((item) => item.name),
   ).toEqual([`Bob`, `Kevin`, `Stuart`])

   collection.utils.begin()
   collection.utils.write({
     type: `update`,
     value: {
       _id: `stuart1`,
       name: `Alvin`,
     },
   })
   collection.utils.commit()

   await waitFor(() => {
     expect(
-      Array.from(query()).map((item) => item.name),
+      Array.from(rendered.result()).map((item) => item.name),
     ).toEqual([`Alvin`, `Bob`, `Kevin`])
   })
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/solid-db/tests/useLiveQuery.test.tsx` around lines 2609 - 2639, The
test is directly calling useLiveQuery without a managed reactive root context,
which can leak subscriptions between tests in Solid.js. Wrap the useLiveQuery
call and all subsequent query operations in either renderHook (the established
pattern used elsewhere in this test file) or createRoot with proper cleanup to
ensure effects and signals are disposed correctly. This ensures the reactive
context is properly initialized and cleaned up after the test completes,
preventing subscription leakage.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@packages/solid-db/tests/useLiveQuery.test.tsx`:
- Around line 2609-2639: The test is directly calling useLiveQuery without a
managed reactive root context, which can leak subscriptions between tests in
Solid.js. Wrap the useLiveQuery call and all subsequent query operations in
either renderHook (the established pattern used elsewhere in this test file) or
createRoot with proper cleanup to ensure effects and signals are disposed
correctly. This ensures the reactive context is properly initialized and cleaned
up after the test completes, preventing subscription leakage.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c00179c5-f4e2-4a12-8731-4007dfcd934c

📥 Commits

Reviewing files that changed from the base of the PR and between bc32c8d and 21f021b.

📒 Files selected for processing (1)
  • packages/solid-db/tests/useLiveQuery.test.tsx

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.

solid-db rendering issues when not using key named id

1 participant