Tanstack Db
Comprehensive React-focused guide for TanStack DB and community integrations (Dexie.js, PGLite). Use when writing or debugging code that uses @tanstack/react-db for live queries, optimistic mutations, or local-first synchronization.
Install
$ agentstack add skill-fellipeutaka-leon-tanstack-db ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README — it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-fellipeutaka-leon-tanstack-db) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming — see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps — measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
TanStack DB (React)
Quick Start
TanStack DB is a local-first database and reactivity layer. For React applications, it provides useLiveQuery and optimistic mutations with sub-millisecond updates powered by d2ts.
Core Guidelines
- Schemas Validate Client State: Schemas are StandardSchema-compatible (Zod, Valibot, etc.). They validate client mutations, not server data.
TInputmust be a superset ofTOutputfor updates to work correctly. - Dependency Arrays: All query hooks require dependency arrays as the last argument, identical to
useEffect. Include all external values. Omit to run on every render, or use[]for static queries. - Conditional Queries: To disable a query, return
undefinedornullfrom the callback. - Router Preloading: Preload data in your route loader (
await collection.preload()), then consume it withuseLiveQueryin the component.
Advanced Topics
For deep dives into specific areas, consult the following references:
- Collections & Schemas: See [references/core-concepts.md](references/core-concepts.md) for collection types, sync modes (eager, on-demand, progressive), and schema constraints.
- Queries & Hooks: See [references/live-queries.md](references/live-queries.md) for the fluent SQL-like API, expression functions,
useLiveSuspenseQuery, and query composition patterns. - Mutations & Transactions: See [references/mutations.md](references/mutations.md) for optimistic updates, mutation merging, temporary ID handling, and direct
QueryCollectionwrites. - Error Handling: See [references/error-handling.md](references/error-handling.md) for specific error types (e.g.,
DuplicateKeyError,SchemaValidationError) and transaction states. - Community Integrations: See [references/community-integrations.md](references/community-integrations.md) for Dexie.js (IndexedDB) and PGLite (WASM PostgreSQL + Drizzle ORM) adapters.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: fellipeutaka
- Source: fellipeutaka/leon
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.