@tanstack/react-db 0.1.81 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-db",
-  "version": "0.1.81",
+  "version": "0.1.83",
   "description": "React integration for @tanstack/db",
   "author": "Kyle Mathews",
   "license": "MIT",
@@ -41,13 +41,13 @@
   ],
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@tanstack/db": "0.6.3"
+    "@tanstack/db": "0.6.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@electric-sql/client": "^1.5.14",
+    "@electric-sql/client": "^1.5.15",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",

package/skills/react-db/SKILL.md

@@ -168,6 +168,72 @@ const mutate = usePacedMutations({
 <textarea onChange={(e) => mutate(e.target.value)} />
 ```
 
+## Includes (Hierarchical Data)
+
+When a query uses includes (subqueries in `select`), each child field is a live `Collection` by default. Subscribe to it with `useLiveQuery` in a subcomponent:
+
+```tsx
+function ProjectList() {
+  const { data: projects } = useLiveQuery((q) =>
+    q.from({ p: projectsCollection }).select(({ p }) => ({
+      id: p.id,
+      name: p.name,
+      issues: q
+        .from({ i: issuesCollection })
+        .where(({ i }) => eq(i.projectId, p.id))
+        .select(({ i }) => ({ id: i.id, title: i.title })),
+    })),
+  )
+
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>
+          {project.name}
+          <IssueList issuesCollection={project.issues} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+// Child component subscribes to the child Collection
+function IssueList({ issuesCollection }) {
+  const { data: issues } = useLiveQuery(issuesCollection)
+  return (
+    <ul>
+      {issues.map((issue) => (
+        <li key={issue.id}>{issue.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+Only the affected `IssueList` re-renders when an issue changes — the parent does not.
+
+With `toArray()`, child results are plain arrays and the parent re-renders on child changes:
+
+```tsx
+import { toArray, eq } from '@tanstack/react-db'
+
+const { data: projects } = useLiveQuery((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    id: p.id,
+    name: p.name,
+    issues: toArray(
+      q
+        .from({ i: issuesCollection })
+        .where(({ i }) => eq(i.projectId, p.id))
+        .select(({ i }) => ({ id: i.id, title: i.title })),
+    ),
+  })),
+)
+// project.issues is string[] — no subcomponent needed
+```
+
+See db-core/live-queries/SKILL.md for full includes rules (correlation conditions, nested includes, aggregates).
+
 ## Virtual Properties
 
 Live query results include computed, read-only virtual properties on every row: