skills.rest
CaiZongyuan
CaiZongyuanCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-db

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
One-click install
npx skills add https://github.com/CaiZongyuan/Expo-TanstackDB-ElectricSQL --skill tanstack-db
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
1

zod

Validate runtime data against Zod v4 schemas in TypeScript projects.

Official
Intermediate
oakossoakoss
14

tanstack-db

Manage reactive client-side data with live queries and optimistic mutations for local-first apps.

Official
Advanced
AmbitionsXXXVAmbitionsXXXV
2

tanstack-router

Implement type-safe file-based routing for React SPAs with TanStack Router.

Community
Advanced
Canhada-LabsCanhada-Labs
2

Frontend Data Layer & Real-Time (Universal)

Configure real-time frontend data layers with WebSocket, SSE, and state stores.

Official
Advanced