db-core/mutations-optimistic

Coordinate optimistic mutations and transactional batching for TanStack DB.

3.9k|254|Updated Mar 11, 2025
One-click install
npx skills add https://github.com/TanStack/db --skill db-core-mutations-optimistic
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: db-core/mutations-optimistic
Source: https://github.com/TanStack/db/tree/main/packages/db/skills/db-core/mutations-optimistic
Command: npx skills add https://github.com/TanStack/db --skill db-core-mutations-optimistic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a comprehensive pattern for performing optimistic mutations and transactional batching in TanStack DB, enabling responsive UI while ensuring data consistency during backend sync.

Core Features & Use Cases

  • insert/update/delete with Immer-style draft proxies and onInsert/onUpdate/onDelete handlers
  • createOptimisticAction for intent-based, synchronous optimistic updates plus a backend mutation function
  • createPacedMutations for debounced/throttled/queued persistence
  • createTransaction for manual batching with ambient transaction context
  • Mutation merging, PendingMutation type, and the Transaction lifecycle (pending/persisting/completed/failed)

Quick Start

Create an optimistic mutation by starting a transaction with createTransaction, perform an update on a collection item, and commit to persist the change.

Frequently Asked Questions about db-core/mutations-optimistic

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

FAQPage Schema
How do I implement optimistic mutations in TanStack DB?

Implement optimistic mutations in TanStack DB using createOptimisticAction for synchronous updates and createTransaction to batch insert, update, and delete operations. This coordinates fast UI with eventual server state persistence.

What is optimistic transactional batching and when do I need it?

Transactional batching groups multiple insert, update, and delete operations into a single ambient transaction. Use it when you need reliable optimistic updates and eventual server consistency without blocking UI responsiveness.

Can I debounce or throttle frontend state mutations before persisting?

Yes, use createPacedMutations to debounce, throttle, or queue persistence operations. This allows you to control how quickly optimistic frontend state changes sync to the backend.

How does the Transaction lifecycle handle failed optimistic updates?

The Transaction lifecycle tracks pending, persisting, completed, and failed states using Transaction.isPersisted. This manages the PendingMutation type and applies merging rules to resolve conflicts during backend sync.

Does TanStack DB support Immer-style draft proxies for collection updates?

Yes, TanStack DB supports Immer-style draft proxies for insert, update, and delete operations. It provides onInsert, onUpdate, and onDelete handlers to manage optimistic state changes within ambient transactions.