Skip to main content Startseite Ersteller tanstack db solid-db
solid-db 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).
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/TanStack/db --skill solid-dbDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository Angular bindings for TanStack DB. injectLiveQuery inject function with Angular signals (Signal<T>) for all return values. Reactive params pattern ({ params: () => T, query: ({ params, q }) => QueryBuilder }) for dynamic queries. Must be called in injection context. Angular 17+ control flow (@if, @for) and signal inputs supported. Import from @tanstack/angular-db (re-exports all of @tanstack/db).
Creating typed collections with createCollection. Adapter selection: queryCollectionOptions (REST/TanStack Query), electricCollectionOptions (ElectricSQL real-time sync), powerSyncCollectionOptions (PowerSync SQLite), rxdbCollectionOptions (RxDB), trailBaseCollectionOptions (TrailBase), localOnlyCollectionOptions, localStorageCollectionOptions. CollectionConfig options: getKey, schema, sync, gcTime, autoIndex (default off), defaultIndexType, syncMode (eager/on-demand, plus progressive for Electric). StandardSchema validation with Zod/Valibot/ArkType. Collection lifecycle (idle/loading/ready/error). Adapter-specific sync patterns including Electric txid tracking, Query direct writes, Query initial data and scoped factories, and PowerSync query-driven sync with onLoad/onLoadSubset hooks.
Building custom collection adapters for new backends. SyncConfig interface: sync function receiving begin, write, commit, markReady, truncate, metadata primitives and returning cleanup, loadSubset, and optional unloadSubset handlers. ChangeMessage format (insert, update, delete). On-demand LoadSubsetOptions (where, orderBy, limit, offset, cursor). Expression parsing: parseWhereExpression, parseOrderByExpression, extractSimpleComparisons, parseLoadSubsetOptions. Collection options creator pattern. rowUpdateMode (partial vs full). Subscription lifecycle and cleanup functions. Persisted sync metadata API (metadata.row and metadata.collection) for storing per-row and per-collection adapter state.
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 > @tanstack/solid-db re-exports everything from @tanstack/db.
Hook
useLiveQuery Returns an Accessor<Array<T>> (or Accessor<T | undefined> with findOne) with additional properties. Call it as a function to get data:
const query = useLiveQuery ((q ) => q.from ({ todo : todoCollection }))
const [minPriority, setMinPriority] = createSignal (5 )
const query = useLiveQuery ((q ) =>
q
.from ({ todo : todoCollection })
.where (({ todo } ) => gt (todo.priority , minPriority ())),
)
const query = useLiveQuery (() => ({
query : (q ) => q.from ({ todo : todoCollection }),
gcTime : 60000 ,
}))
const query = useLiveQuery (() => preloadedCollection)
const query = useLiveQuery ((q ) => {
const id = userId ()
if (!id) return undefined
return q
.from ({ todo : todoCollection })
.where (({ todo } ) => eq (todo.userId , id))
})
Solid-Specific Patterns
Signal reads inside query function
const [category, setCategory] = createSignal ('work' )
const query = useLiveQuery ((q ) =>
q
.from ({ todo : todoCollection })
.where (({ todo } ) => eq (todo.category , category ())),
)
const cat = category ()
const query = useLiveQuery ((q ) =>
q.from ({ todo : todoCollection }).where (({ todo } ) => eq (todo.category , cat)),
)
findOne (single result) When the query uses .findOne(), useLiveQuery returns a single object (or undefined) instead of an array:
const userQuery = useLiveQuery ((q ) =>
q
.from ({ user : usersCollection })
.where (({ user } ) => eq (user.id , userId ()))
.findOne (),
)
return <Show when ={userQuery()} > {(user) => <div > {user().name}</div > }</Show >
Suspense integration <ErrorBoundary fallback={(error ) => <div > {error.message}</div > <Suspense fallback ={ <div > Loading...</div > }>
<For each ={todosQuery()} > {(todo) => <li > {todo.text}</li > }</For >
</Suspense > ErrorBoundary >
useLiveQuery integrates with Solid's createResource. Use <Suspense> for
loading and <ErrorBoundary> for errors. Reading an errored query throws
through the resource, so do not rely on reading isError after failure.
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:
function ProjectList (const projectsQuery = 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 (
<For each ={projectsQuery()} >
{(project) => (
<div >
{project.name}
<IssueList issuesCollection ={project.issues} />
</div >
)}
</For > function IssueList (props : { issuesCollection: Collection }const issuesQuery = useLiveQuery (() => props.issuesCollection )
return <For each ={issuesQuery()} > {(issue) => <div > {issue.title}</div > }</For > Note: wrap the child Collection in an Accessor (() => props.issuesCollection) to match the overload signature.
With toArray(), child results are plain arrays and the parent re-emits on child changes:
import { toArray, eq } from '@tanstack/solid-db'
const projectsQuery = 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 })),
),
})),
)
See db-core/live-queries/SKILL.md for full includes rules (correlation conditions, nested includes, aggregates).
Common Mistakes
HIGH Reading signals outside the query function const [userId] = createSignal (1 )
const id = userId ()
const query = useLiveQuery ((q ) =>
q.from ({ todo : todoCollection }).where (({ todo } ) => eq (todo.userId , id)),
)
const [userId] = createSignal (1 )
const query = useLiveQuery ((q ) =>
q
.from ({ todo : todoCollection })
.where (({ todo } ) => eq (todo.userId , userId ())),
)
Solid's reactivity tracks signal reads inside reactive contexts. Reading outside the query function captures the value at creation time — changes won't trigger re-execution.
Source: docs/framework/solid/overview.md
MEDIUM Using deprecated query.data instead of query() <For each={todosQuery.data }>{(todo ) => <li > {todo.text}</li > For >
<For each={todosQuery ()}>{(todo ) => <li > {todo.text}</li > For >
query.data is deprecated. Always use query() to access data. If you encounter existing code using .data, migrate it to the function call form.
See also: db-core/live-queries/SKILL.md — for query builder API.
See also: db-core/mutations-optimistic/SKILL.md — for mutation patterns.
