skills.rest
samdop
samdopCOMMUNITY
Explore all skills by this author →
GitHub

state-and-data-fetching

Migrate ASP.NET MVC data flows into React hooks using TanStack Query, axios, and react-hook-form.

Updated Jul 23, 2026
Search Tags:#react#zod#websocket#tanstack-query#react-hook-form#axios#aspnet-mvc-migration
One-click install
npx skills add https://github.com/samdop/convertonode --skill state-and-data-fetching-samdop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-and-data-fetching
Source: https://github.com/samdop/convertonode/tree/main/.github/skills/state-and-data-fetching
Command: npx skills add https://github.com/samdop/convertonode --skill state-and-data-fetching-samdop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires axios, @tanstack/react-query, react-hook-form, zod, @hookform/resolvers.

What problem does it solve? Migrating ASP.NET MVC applications to React requires replacing ViewModels, form posts, jQuery AJAX, Session state, and AntiForgeryToken patterns with a typed client-side data layer, which is error-prone without clear patterns for caching, validation, and real-time updates. ## Core Features & Use Cases - Typed API Client: Provides an axios instance template with bearer token injection, CSRF headers, normalized ApiError handling, and 401 redirect logic. - Resource Query Hooks: Supplies a useResource pattern with hierarchical query keys, useQuery/useMutation hooks, cache invalidation, and optimistic update rollback. - Forms and Validation: Combines react-hook-form, zod schemas shared from @shared, and shadcn Form primitives with server field-error mapping via form.setError. - Real-time Invalidation: Includes a WebSocket subscription hook that invalidates TanStack Query caches from Postgres LISTEN/NOTIFY events. - Use Case: When converting an MVC Employee controller with list views and form POSTs, generate useEmployees, useCreateEmployee, and a zod-validated EmployeeForm that replaces Razor views and jQuery $.ajax calls. ## Quick Start Ask the AI to migrate an MVC controller's list and create actions into TanStack Query hooks and a react-hook-form component using this skill.

Frequently Asked Questions about state-and-data-fetching

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

FAQPage Schema
How do I migrate MVC form POST actions to React?▼

Replace each MVC form POST action with a useMutation hook that calls the API through axios, then invalidate the affected query keys on success. Validate input with a shared zod schema and manage fields with react-hook-form instead of MVC model binding.

What replaces jQuery $.ajax calls in a React migration?▼

Replace jQuery $.ajax calls with useQuery hooks for reads and useMutation hooks for writes, both routed through a single axios API client. AJAX-loaded partial views become child components that own their own query hooks.

Should server data go in Redux, Zustand, or TanStack Query?▼

Server data belongs in TanStack Query, not Redux, Zustand, or Context, because it needs caching, invalidation, retries, and synchronization with the backend. Reserve Zustand or Redux Toolkit for complex cross-component client state only.

How do I handle AntiForgeryToken when migrating to React?▼

Replace AntiForgeryToken with an axios request interceptor that reads the XSRF cookie and attaches a CSRF header on POST, PUT, PATCH, and DELETE requests. Alternatively, rely on SameSite cookies depending on the backend security strategy.

How do optimistic updates work with TanStack Query?▼

In onMutate, cancel affected queries, snapshot the previous cache, and set the optimistic value. On error, roll back from the snapshot context, and on settled, invalidate the query to reconcile with the server.

When should I add WebSocket invalidation instead of polling?▼

Add WebSocket invalidation only when screens need real-time freshness or cross-user coordination, such as Postgres LISTEN/NOTIFY driven updates. Prefer boring REST reads with staleTime and refetchInterval for most resources.

Related Skills

Explore More Software Engineering Skills→
twofoldtech-dakotatwofoldtech-dakota
2

fullstack-classic

Implement ASP.NET MVC full-stack features with form processing and AJAX.

Community
Advanced
HouseGarofaloHouseGarofalo
3

azure-static-web-apps

Deploy and manage static web apps on Azure Static Web Apps.

Official
Intermediate
allthriveaiallthriveai

csrf-auth-debugger

Debug CSRF and JWT authentication issues in Django projects.

Official
Advanced
HCMUTE-RTICHCMUTE-RTIC

frontend-developer

Develop and optimize React 19 and Next.js 15 frontend applications.

Official
Advanced