mis-client-crud-state

Implements client-side CRUD mutations by patching local store state instead of refetching lists.

Updated Oct 7, 2023

Search Tags:#state management #frontend #react #crud #mutations #optimistic updates #refetch

Ready to run

npx skills add https://github.com/AhmedElbialy148/Portfolio --skill mis-client-crud-state-ahmedelbialy148

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mis-client-crud-state
Source: https://github.com/AhmedElbialy148/Portfolio/tree/main/.cursor/skills/mis-client-crud-state
Command: npx skills add https://github.com/AhmedElbialy148/Portfolio --skill mis-client-crud-state-ahmedelbialy148

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend lists and sidebars often refetch entire collections after every create, update, or delete, causing flicker, latency, and lost UI state. This Skill provides a pattern for updating client-hydrated collections directly from mutation responses or submitted input, with proper in-flight row indicators. ## Core Features & Use Cases - Local store patching: Prepend, merge, or filter rows in the owning provider using API responses instead of calling refetch after mutations. - In-flight row state: Track pending creates and per-id mutating rows so spinners appear on the correct sidebar or table row. - Per-operation recipes: Concrete TypeScript flows for create, rename/update, and delete, including navigation after deleting the viewed resource. - Use Case: A user renames a chat in a sidebar; the row shows a spinner with the new title, the store merges the patch on success, and no list refetch occurs. ## Quick Start Apply the mis-client-crud-state pattern to implement create, rename, and delete in my sidebar list so rows update locally without refetching.

Frequently Asked Questions about mis-client-crud-state

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

FAQPage Schema

How do I update a list after a mutation without refetching?▼

Patch the local store that owns the collection using the mutation response or submitted input. Prepend new rows on create, merge fields with map on update, and filter out the id on delete, avoiding any refetch call.

How to show a loading spinner on the correct row during delete or rename?▼

Track in-flight state keyed by the row's stable id in the shared store, not a global isPending flag. The row renders a spinner with reduced opacity and disabled interactions until the mutation resolves and the marker clears.

When should I refetch instead of patching local state?▼

Refetch only when the server derives opaque fields like counts, permissions, or sort keys that the client cannot compute, or when multi-tab consistency is critical. Even then, prefer a scoped refetch of one item or one scope.

Should I use optimistic updates for delete operations?▼

Avoid optimistic patching before the API call for deletes unless you implement rollback. The safer pattern keeps the row visible with an in-flight spinner and removes it from state only after the DELETE succeeds.

Why does my sidebar not update after renaming an item?▼

The sidebar likely reads from a different data source than the one you patched. Ensure all consumers read from the same store, such as a getChatById selector, so local patches propagate to headers, detail views, and lists.