tanstack-db

Name: tanstack-db
Availability: InStock
Author: CaiZongyuan

Implement reactive data layers with TanStack DB collections and live queries.

2|Updated Dec 30, 2025

Search Tags:#schema-validation #live-queries #LocalStorage #TanStack-DB #optimistic-mutations #reactive-collections #ElectricSQL

Ready to run

npx skills add https://github.com/CaiZongyuan/Expo-TanstackDB-ElectricSQL --skill tanstack-db

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-db
Source: https://github.com/CaiZongyuan/Expo-TanstackDB-ElectricSQL/tree/main/.claude/skills/tanstack-db
Command: npx skills add https://github.com/CaiZongyuan/Expo-TanstackDB-ElectricSQL --skill tanstack-db

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack DB helps developers build reactive, real-time data layers by providing normalized collections, live queries, and optimistic mutations, enabling offline-first experiences and seamless data synchronization.

Core Features & Use Cases

Core concepts: normalized collections, live queries, optimistic mutations, and schema validation.
Use cases: real-time dashboards, offline-first mobile apps, cross-tab synchronization with LocalStorage.
Real-world example: build a todo app with real-time updates and offline support using ElectricSQL or similar sync engines.

Quick Start

Install dependencies for TanStack DB and choose a collection type (QueryCollection or ElectricCollection) based on your backend. Define a simple schema with a standard schema library (e.g., Zod) and create a collection with a suitable options factory. Engage a live query in a React component to observe real-time updates and optimistic UI behavior.

Frequently Asked Questions about tanstack-db

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a reactive data layer with live queries for real-time updates?▼

Build a reactive data layer by defining normalized collections and engaging live queries in your components. TanStack DB observes these collections to stream real-time updates directly into your UI.

What's the best way to implement offline-first apps with local sync and optimistic mutations?▼

Implement offline-first apps using TanStack DB's normalized collections and optimistic mutations. This combination enables seamless local data synchronization and reactive UI updates when connectivity is restored.

Does TanStack DB support cross-tab synchronization using LocalStorage?▼

Yes, TanStack DB supports cross-tab synchronization using LocalStorage. You can persist and sync normalized collections across browser tabs to maintain consistent reactive data states.

Can I use schema validation with Zod for reactive collections?▼

Yes, you can apply schema validation to reactive collections using standard schema libraries like Zod. Define your collection schema to validate data integrity before processing live queries and mutations.

How do I integrate ElectricSQL for local-first sync in a React app?▼

Integrate local-first sync by selecting an ElectricCollection type and configuring it with ElectricSQL. This backend integration syncs normalized collections to support offline-capable React applications.

When should I use QueryCollection versus ElectricCollection for live queries?▼

Use QueryCollection for standard live queries or choose ElectricCollection when integrating specifically with ElectricSQL. Your selection depends on the backend sync engine powering your reactive data layer.