safe-action-tanstack-query
CommunityBridge server actions to TanStack Query mutations
Software Engineering#error-handling#mutation#tanstack-query#server-actions#optimistic-updates#cache-invalidation
Authorgepetojj
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Bridges Next Safe Action results with TanStack Query mutations to ensure consistent error modeling and cache integration across client-server flows.
Core Features & Use Cases
- Bridges action outcomes from Next Safe Action to TanStack Query's mutation flow, enabling unified error handling, navigation safety, and cache invalidation.
- Exposes mutationOptions() that translate non-throwing action results into UseMutation-compatible data envelopes, with type guards for server and validation errors.
- Supports optimistic updates and robust error recovery via onMutate, onError, and onSettled integration in client components.
- Real-world scenario: a form submission in a Next.js app uses mutationOptions(boundAction) to submit, shows inline errors, and automatically invalidates related queries on success.
Quick Start
Use mutationOptions in your React component by wrapping your server action to enable consistent error handling and automatic cache management.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: safe-action-tanstack-query Download link: https://github.com/gepetojj/umo/archive/main.zip#safe-action-tanstack-query Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.