Tanstack Db
TanStack DB is a reactive client store that extends TanStack Query with typed collections, live queries, and optimistic mutations. It normalizes data for sub-millisecond cross-collection queries and delivers instant optimistic updates with automatic rollback. Use it for apps needing local-first data, real-time sync via ElectricSQL, or complex joins that outgrow per-query caching.
TanStack DB lets you set up a reactive client-side database with live queries and optimistic mutations for local-first apps.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-03-02
TanStack DB lets you set up a reactive client-side database with live queries and optimistic mutations for local-first apps. TanStack DB is a reactive client store that extends TanStack Query with typed collections, live queries, and optimistic mutations. It normalizes data for sub-millisecond cross-collection queries and delivers instant optimistic updates with automatic rollback. Use it for apps needing local-first data, real-time sync via ElectricSQL, or complex joins that outgrow per-query caching.
Use it when
- Tanstack DB setup involves installing the library via npm, initializing a typed store with your data schema, and defining collections.
- Yes, Tanstack DB supports real-time sync through ElectricSQL integration for live data updates.
Install
oakoss/agent-skills/tanstack-db · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Tanstack DB and how does it work?
Tanstack DB is a reactive client store that extends TanStack Query with typed collections, live queries, and optimistic mutations. It normalizes data for sub-millisecond cross-collection queries and delivers instant optimistic updates with automatic rollback. Use Tanstack DB for apps needing local-first data, real-time sync via ElectricSQL, or complex joins that outgrow per-query caching.
How do I set up and configure Tanstack DB for data querying?
Tanstack DB setup involves installing the library via npm, initializing a typed store with your data schema, and defining collections. Configure your queries by specifying relationships between collections to enable sub-millisecond cross-collection queries. Tanstack DB's configuration supports both local-first and real-time sync architectures depending on your application needs.
Can Tanstack DB handle real-time data and offline functionality?
Yes, Tanstack DB supports real-time sync through ElectricSQL integration for live data updates. It also provides offline-first capabilities, allowing your application to work seamlessly without network connectivity. Tanstack DB's optimistic mutations ensure instant UI updates with automatic rollback if operations fail, maintaining data consistency across online and offline states.
What are the main features and capabilities of Tanstack DB?
Tanstack DB features include typed collections for type-safe queries, live queries for reactive data binding, optimistic mutations with automatic rollback, and normalized data storage. Key capabilities include sub-millisecond cross-collection queries, real-time sync support, offline functionality, and complex join operations that exceed traditional per-query caching limitations.
How do I integrate Tanstack DB into my application?
Integrate Tanstack DB by installing the npm package, creating a store instance with your typed schema, and connecting it to your data source. Tanstack DB works with frameworks like React through hooks and provides adapters for real-time backends like ElectricSQL. Define your collections, set up queries, and use optimistic mutations to handle user interactions with instant feedback.
What should I know about Tanstack DB performance optimization?
Tanstack DB optimizes performance through data normalization, enabling sub-millisecond cross-collection queries. Its reactive architecture and optimistic mutations reduce perceived latency. For best results, design your collection schema carefully, leverage live queries for reactive updates, and use automatic rollback to maintain consistency without manual error handling overhead.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up and configure Tanstack DB for data querying”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
ElectricSQL streams partial replicas of Postgres data to client apps in real time using Shapes, handling the read path with logical replication while writes flow through your existing API. Set up Shape requests with filtering and column selection, implement auth proxies to control access per user, and choose write patterns ranging from online-only to through-the-database strategies.
TanStack DB is a client-first embedded database layer that maintains normalized data collections and powers reactive queries with automatic optimistic mutations. It integrates with TanStack Query for fetching and uses differential dataflow to compute only affected results on changes, delivering sub-millisecond performance even with 100k+ rows.
This framework guides you through adopting local-first architecture for web applications, from deciding whether it fits your use case to selecting sync engines, client-side storage solutions, and conflict resolution approaches. It covers when local-first makes sense—collaborative apps, latency-sensitive UIs, unreliable networks—and when simpler server-based patterns are better.
Tanstack Start provides comprehensive guidelines for building full-stack React applications with patterns covering server functions, middleware, authentication, and SSR. The skill organizes best practices across critical, high, and medium-priority categories to help you handle data mutations, secure routes, manage sessions, and deploy confidently.
TanStack Hotkeys is a React library for adding keyboard shortcuts with template-string bindings and automatic cross-platform key abstraction. It includes hooks for single hotkeys, multi-key sequences, shortcut recording, and key state tracking, plus utilities for displaying platform-specific shortcut labels.
Tanstack Start combines React with TanStack Router to build full-stack applications featuring type-safe RPC server functions, server-side rendering with streaming, and middleware composition. Deploy to Cloudflare Workers, Vercel, Netlify, AWS Lambda, and other platforms with built-in support for authentication, API routes, and session management.
More skills Tanstack Query (unlicensed) · Pglite (unlicensed) · Drizzle Orm (unlicensed) · tanstack-table (MIT) · Realtime Sync (unlicensed) · Tanstack Pacer (unlicensed)