skills.rest
lgerard314
lgerard314OFFICIAL
Explore all skills by this author →
GitHub

state-integrity-check

Coordinates TanStack Query cache updates with Next.js server actions and cross-tab messaging.

Updated Aug 27, 2026
Search Tags:#cache#invalidation#mutation#revalidation#optimistic-update#cross-tab#server-truth
One-click install
npx skills add https://github.com/lgerard314/global-plugin --skill state-integrity-check
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-integrity-check
Source: https://github.com/lgerard314/global-plugin/tree/main/plugin/skills/state-integrity-check
Command: npx skills add https://github.com/lgerard314/global-plugin --skill state-integrity-check

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents the UI from showing stale or divergent data after mutations by ensuring client caches, server state, and real-time updates stay in sync, across tabs and routing boundaries.

Core Features & Use Cases

  • Targeted cache invalidation: invalidate only dependent queries to avoid unnecessary refetches.
  • Optimistic updates with rollback: snapshot, apply optimistic changes, and rollback on error with a final reconcile.
  • Server-truth-first mutations: update server data and reconcile client caches with server response.
  • Explicit Next.js revalidation: call revalidatePath or revalidateTag after mutations to purge stale pages.
  • Cross-tab and WebSocket resilience: broadcast and reconnect logic to ensure edits propagate across tabs and sessions.
  • Inter-skill collaboration: coordinates with prisma-data-access-guard and frontend-implementation-guard to separate concerns.

Quick Start

Audit your mutation flows to ensure cache integrity by applying targeted invalidations, onMutate rollback, server-truth reconciliation, explicit Next.js revalidation, and reliable cross-tab messaging.

Frequently Asked Questions about state-integrity-check

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

FAQPage Schema
How do I keep TanStack Query caches in sync with Next.js server actions after mutations?▼

To keep TanStack Query caches in sync with Next.js server actions, apply targeted invalidateQueries for dependent data and call revalidatePath or revalidateTag to purge stale server pages, ensuring the UI reflects updated server truth.

What is the best way to handle optimistic updates with rollback in React?▼

Handling optimistic updates with rollback requires snapshotting the current cache state during onMutate, applying the expected change immediately, and reverting to the snapshot if the mutation errors before a final onSettled reconciliation.

How does cross-tab cache revalidation work for real-time application state?▼

Cross-tab cache revalidation works by broadcasting mutation events across browser tabs using messaging APIs, ensuring that data edits propagate to active sessions and preventing divergent or stale UI states across the application.

Why does my UI show stale data after a mutation even with cache invalidation?▼

Your UI shows stale data after a mutation when cache invalidation is too broad or misaligned with server truth, requiring targeted invalidateQueries and explicit Next.js revalidation to properly reconcile client caches with the actual server response.

Can I use server-driven revalidation instead of manual client cache invalidation?▼

You can use server-driven revalidation by calling revalidateTag or revalidatePath within Next.js server actions to purge stale pages, functioning as an explicit complement to targeted client-side cache invalidation for maintaining server truth.

When should I avoid broad invalidateQueries calls in my mutation flows?▼

You should avoid broad invalidateQueries calls when only specific dependent queries are affected by a mutation, instead enforcing targeted invalidation scopes to prevent unnecessary refetches and maintain optimal application performance.

Related Skills

Explore More Software Engineering Skills→
gepetojjgepetojj
1

safe-action-tanstack-query

Bridge Next Safe Action results with TanStack Query mutations.

Community
Advanced
RomualdPRomualdP

useOptimistic Hook Generator

Implement optimistic UI updates with useOptimistic and revalidatePath rollback.

Community
Intermediate
JordanCoinJordanCoin
6

separation-of-concerns

Enforce clear layer and module boundaries across frontend, backend, and services.

Community
Intermediate
modu-aimodu-ai
1.2k

moai-platform-convex

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

Official
Advanced