tanstack-db

Manage client-side data with normalized collections and live queries.

29|2|Updated Jan 25, 2026

Search Tags:#typescript #store #tanstack #collections #reactive #live-queries #optimistic-mutations

Ready to run

npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-db-tanstack-skills

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reactive client-first store for your API with collections, live queries, and optimistic mutations, enabling real-time UI updates and streamlined data access.

Core Features & Use Cases

Normalized collections that map to API data sources and support efficient updates.
Live queries that automatically update UI when data changes, with automatic optimistic mutations.
Seamless integration with TanStack Query to coordinate fetching and caching.

Quick Start

Create a collection with createCollection and subscribe to it with useLiveQuery to observe live data.

Frequently Asked Questions about tanstack-db

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

FAQPage Schema

How do I manage client-side state with live queries and optimistic mutations in React?▼

Live queries manage client-side state by exposing a reactive store that normalizes collections and automatically applies optimistic mutations. This enables real-time UI updates and streamlined data access across API sources without manual cache synchronization.

What is the best way to normalize API collections for real-time UI updates in TypeScript?▼

Normalizing API collections for real-time UI updates is best handled by mapping data sources to a reactive store that supports live query subscriptions. This approach uses differential dataflow-based reactivity to ensure the UI updates efficiently when underlying data changes.

Does this reactive store work with TanStack Query for data fetching and caching?▼

Yes, the reactive store integrates seamlessly with TanStack Query to coordinate data fetching and caching. This allows you to combine TanStack Query's server-state management with local collections, live queries, and optimistic mutations for offline support.

How do I set up a reactive collection and subscribe to live data updates?▼

To set up a reactive collection and subscribe to live data, create a collection using createCollection and observe its live data using the useLiveQuery hook. This automatically subscribes your UI to differential dataflow-based reactivity for real-time updates.

Can I use optimistic mutations and offline support with a normalized client-side data store?▼

Yes, you can use optimistic mutations and offline support with a normalized client-side data store. The store applies optimistic mutations automatically and manages collections across API sources, ensuring UI updates happen instantly even when offline.