Skip to main content ホーム クリエイター 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).
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TanStack/db --skill solid-dbコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中...
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.
