Skip to main content Accueil Créateurs 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).
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/TanStack/db --skill solid-dbLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt 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.
