skills.rest
Dayopt
DayoptOFFICIAL
Explore all skills by this author →
GitHub

optimistic-update

Implements optimistic tRPC mutations with cache snapshotting, rollback on error, and invalidation on settle.

Updated Jun 23, 2025
Search Tags:#rollback#trpc#realtime#tanstack-query#optimistic-updates#ui-feedback#cache-management
One-click install
npx skills add https://github.com/Dayopt/app --skill optimistic-update
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimistic-update
Source: https://github.com/Dayopt/app/tree/main/.claude/skills/optimistic-update
Command: npx skills add https://github.com/Dayopt/app --skill optimistic-update

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a robust pattern for applying optimistic updates to tRPC mutations, enabling immediate UI feedback while ensuring data integrity through controlled rollbacks.

Core Features & Use Cases

  • OnMutate snapshot: take a cache snapshot and apply optimistic changes.
  • OnError rollback: revert to the snapshot if the mutation fails.
  • OnSettled invalidation: refresh related queries after completion.
  • Realtime coordination: optionally synchronize with realtime streams to avoid conflicts.

Quick Start

Implement an optimistic mutation pattern by snapshotting the cache in onMutate, rolling back in onError, and invalidating queries in onSettled.

Frequently Asked Questions about optimistic-update

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

FAQPage Schema
How do I implement optimistic updates with tRPC and TanStack Query?▼

Implement optimistic updates by taking a cache snapshot in onMutate, applying optimistic changes, reverting in onError, and invalidating related queries in onSettled.

What is the best way to rollback tRPC mutations on error?▼

The best way to rollback tRPC mutations is capturing a cache snapshot during onMutate and restoring it in onError if the mutation fails.

How does optimistic cache management handle realtime data conflicts?▼

Optimistic cache management handles realtime conflicts by applying optional realtime coordination safeguards to synchronize cache updates and prevent data overwrites.

When do I need to invalidate related caches after a mutation?▼

You need to invalidate related caches in the onSettled phase after the mutation completes to refresh queries and ensure UI consistency.

Can I use optimistic UI feedback without breaking data integrity?▼

Yes, you can provide instant UI feedback while maintaining data integrity by enforcing an onMutate snapshot, an onError rollback, and an onSettled invalidation sequence.

Why does my UI show stale data after a failed tRPC mutation?▼

Your UI shows stale data because the cache is not reverted; applying an onError rollback restores the snapshot taken during onMutate to fix this.

Related Skills

Explore More Software Engineering Skills→
Ahnd6474Ahnd6474

accelint-tanstack-query-best-practices

Configure TanStack Query to prevent data leakage and performance issues in Next.js App Router applications.

Community
Advanced
MadAppGangMadAppGang
278

tanstack-query

Manage server state and data fetching in React with TanStack Query v5.

Official
Intermediate
gepetojjgepetojj
1

safe-action-tanstack-query

Bridge Next Safe Action results with TanStack Query mutations.

Community
Advanced
modu-aimodu-ai
1.2k

moai-platform-convex

Implement Convex server functions, reactive queries, and optimistic updates for real-time apps.

Official
Advanced