tanstack-db

Implement reactive client-side collections with live queries and optimistic mutations using TanStack DB.

Updated Feb 27, 2026
One-click install
npx skills add https://github.com/firstaxel/neon --skill tanstack-db-firstaxel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-db
Source: https://github.com/firstaxel/neon/tree/main/.agents/skills/tanstack-db
Command: npx skills add https://github.com/firstaxel/neon --skill tanstack-db-firstaxel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-db, @tanstack/query-db-collection.

What problem does it solve? Managing client-side state with TanStack Query alone requires manual optimistic update logic, rollback handlers, and cache invalidation for every mutation. This Skill provides guidance for building a reactive client-side data layer with normalized collections, live queries, and automatic optimistic mutations. ## Core Features & Use Cases - Collections with Sync Modes: Create normalized data stores backed by TanStack Query with eager, on-demand, or progressive sync strategies for different dataset sizes. - Live Queries: Build reactive SQL-like queries with filtering, joins, ordering, and limits that update automatically when underlying data changes. - Automatic Optimistic Mutations: Insert, update, and delete operations instantly update all live queries and roll back automatically on server failure. - Use Case: A team building a collaborative project dashboard uses on-demand collections so live queries automatically generate optimized API requests with filters and pagination, while mutations update the UI instantly without manual cache management. ## Quick Start Ask the AI to set up a TanStack DB collection backed by TanStack Query with a live query and optimistic insert mutation for your data model.

Frequently Asked Questions about tanstack-db

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

FAQPage Schema
How do I create a TanStack DB collection with TanStack Query?▼

Use createCollection with queryCollectionOptions, providing a queryKey, queryFn, getKey function, and optional schema. Add onInsert, onUpdate, and onDelete handlers to sync mutations back to your server API.

How do live queries work in TanStack DB?▼

The useLiveQuery hook accepts a query builder callback supporting where clauses, joins, orderBy, and limit. Results update automatically and incrementally when underlying collection data changes, with sub-millisecond recomputation.

What is the difference between TanStack DB and TanStack Query?▼

TanStack DB builds on top of TanStack Query rather than replacing it. Query handles data fetching while DB adds normalized collections, reactive live queries, and automatic optimistic mutations with rollback.

Which sync mode should I use for large datasets in TanStack DB?▼

Use eager mode for collections under 10k rows, on-demand mode for datasets over 50k rows or search scenarios, and progressive mode for collaborative apps needing immediate subsets plus background full sync.

Why are my TanStack DB mutations not syncing to the server?▼

Mutations only persist if you define onInsert, onUpdate, and onDelete handlers in the collection options. Without these handlers, changes remain local and no server requests are made.