tanstack-db

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

29|2|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-db-tanstack-skills
Or copy as Structured Prompt for Agent▼
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.