solid-db

name	solid-db
description	SolidJS bindings for TanStack DB. useLiveQuery returns an Accessor that doubles as data access (call as function) with state/status properties. Fine-grained reactivity: signal reads MUST happen inside the query function for tracking. Config passed as Accessor (() => config). Built-in Suspense support via createResource and errors through Solid ErrorBoundary. ReactiveMap for state. Import from @tanstack/solid-db (re-exports all of @tanstack/db).
type	framework
library	db
framework	solid
library_version	0.6.17
requires	["db-core"]
sources	["TanStack/db:docs/framework/solid/overview.md","TanStack/db:packages/solid-db/src/useLiveQuery.ts"]

This skill builds on db-core. Read it first for collection setup, query builder, and mutation patterns.

TanStack DB — SolidJS

Setup

import { useLiveQuery, eq, not } from '@tanstack/solid-db'
import { ErrorBoundary, For, Show, Suspense } from 'solid-js'

function TodoList() {
  const todosQuery = useLiveQuery((q) =>
    q
      .from({ todo: todoCollection })
      .where(({ todo }) => not(todo.completed))
      .orderBy(({ todo }) => todo.created_at, 'asc'),
  )

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ul>
        <For each={todosQuery()}>{(todo) => <li>{todo.text}</li>}</For>
      </ul>
    </Suspense>
  )
}