tanstack-db

Synchronize API data into normalized collections with live queries and optimistic mutations.

Updated Apr 4, 2026
One-click install
npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-db-tahermustansir1929
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-db
Source: https://github.com/TaherMustansir1929/zainy-water-v3/tree/main/.agents/skills/tanstack-db
Command: npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-db-tahermustansir1929

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack DB provides a client-first reactive data layer that eliminates manual cache management and brittle ad-hoc synchronization between UI state and API data, enabling instant UI updates and consistent normalized collections even at high scale.

Core Features & Use Cases

  • Normalized Collections: Define module-level collections that wrap remote data sources to maintain a single source of truth for related UI views.
  • Live Queries & Joins: Subscribe to incremental, SQL-like live queries that update sub-millisecond as underlying data changes, including cross-collection joins and ordering.
  • Optimistic Mutations & Sync Modes: Perform optimistic inserts/updates/deletes with automatic rollback and configurable sync modes (eager, on-demand, progressive) for small and very large datasets.
  • Real-world Example: Use an on-demand product collection to power search results and pagination while using optimistic mutations for quick cart operations that roll back on failure.

Quick Start

Create a TanStack DB collection that syncs todos from the API and show a live query of incomplete todos.

Frequently Asked Questions about tanstack-db

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

FAQPage Schema
How do I manage live queries and optimistic UI updates for large collections in React?

Live queries in a client-side reactive store update sub-millisecond by applying differential incremental computation to normalized collections, ensuring instant UI updates as underlying API data changes without manual cache management.

What is the best way to perform cross-collection joins and ordering on client-cached API data?

Cross-collection joins and ordering are handled by subscribing to incremental, SQL-like live queries on a normalized client store, which maintains a single source of truth and updates joined results automatically as underlying data changes.

Can I use TanStack Query for optimistic mutations with automatic rollback?

Yes, TanStack Query integration supports optimistic inserts, updates, and deletes with automatic rollback, allowing your UI to instantly reflect changes and safely revert to its previous state if the remote API mutation fails.

Does this reactive store support sync modes for very large datasets?

Yes, the reactive store supports configurable sync modes including eager, on-demand, and progressive sync, allowing you to efficiently handle both small collections and very large datasets in your React frontend.

How do I map query predicates to API calls for progressive data synchronization?

You map query predicates to API calls using predicate-to-API mapping, which allows the reactive store to fetch and synchronize data progressively or on-demand based on the specific live queries your UI components require.

Why does my React UI need a normalized collection store instead of manual cache management?

A normalized collection store eliminates brittle ad-hoc synchronization between UI state and API data, providing a single source of truth that ensures consistent views and automatic reactive updates even at high scale.