Skip to content

Commit 8f19a74

Browse files
balegasclaude
andcommitted
docs(react-db): add CRITICAL mistakes for === in where and useLiveQuery destructuring
AI agents frequently make two mistakes that cause runtime crashes: 1. Using `===` instead of `eq()` in `.where()` callbacks — returns a boolean instead of a query expression, throwing InvalidWhereExpressionError 2. Assigning `useLiveQuery()` directly to a variable instead of destructuring `{ data }` — then calling `.map()` on the result object, throwing "map is not a function" Both are documented in db-core/live-queries but agents often only read the react-db skill. Adding the warnings here where they'll actually be seen. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent dd16655 commit 8f19a74

1 file changed

Lines changed: 42 additions & 0 deletions

File tree

  • packages/react-db/skills/react-db

packages/react-db/skills/react-db/SKILL.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,48 @@ See meta-framework/SKILL.md for full preloading patterns.
302302

303303
## Common Mistakes
304304

305+
### CRITICAL Using === instead of eq() in .where()
306+
307+
Wrong — throws `InvalidWhereExpressionError` at runtime:
308+
309+
```tsx
310+
const { data } = useLiveQuery((q) =>
311+
q.from({ todo: todoCollection }).where(({ todo }) => todo.completed === true),
312+
[],
313+
)
314+
```
315+
316+
Correct — use expression functions from `@tanstack/react-db`:
317+
318+
```tsx
319+
import { useLiveQuery, eq } from '@tanstack/react-db'
320+
321+
const { data } = useLiveQuery((q) =>
322+
q.from({ todo: todoCollection }).where(({ todo }) => eq(todo.completed, true)),
323+
[],
324+
)
325+
```
326+
327+
JavaScript `===`, `!==`, `<`, `>` return a boolean, not a query expression. Always use `eq`, `gt`, `gte`, `lt`, `lte`, `and`, `or`, `not`, `like`, `ilike`, `isNull`, `isUndefined`, `inArray`. See db-core/live-queries/SKILL.md for the full operator reference.
328+
329+
### CRITICAL Assigning useLiveQuery result directly instead of destructuring
330+
331+
Wrong — crashes with "map is not a function":
332+
333+
```tsx
334+
const todos = useLiveQuery((q) => q.from({ todo: todoCollection }), [])
335+
return todos.map(t => <li>{t.text}</li>) // TypeError: todos.map is not a function
336+
```
337+
338+
Correct — destructure `{ data }` with a default:
339+
340+
```tsx
341+
const { data: todos = [] } = useLiveQuery((q) => q.from({ todo: todoCollection }), [])
342+
return todos.map(t => <li key={t.id}>{t.text}</li>)
343+
```
344+
345+
`useLiveQuery` returns an object `{ data, isLoading, status, ... }`, not the array directly.
346+
305347
### CRITICAL Missing external values in dependency array
306348

307349
Wrong:

0 commit comments

Comments
 (0)