Migrate React/TypeScript data fetching from useEffect to TanStack Query with Zod schemas.
npx skills add https://github.com/WTFox/dotfiles --skill react-data
Please help me install this Agent Skill. Skill: react-data Source: https://github.com/WTFox/dotfiles/tree/main/claude/.claude/skills/react-data Command: npx skills add https://github.com/WTFox/dotfiles --skill react-data
React and TypeScript codebases often suffer from data-fetching and state-management pitfalls, including using useEffect for API calls, missing loading or error states, and mismatched types and schemas.
Convert a useEffect data fetch to TanStack Query and validate responses with a Zod schema to ensure type-safety and correct caching.
High-intent search queries and answers about installing and using this skill.
Migrating React data fetching from useEffect to TanStack Query involves replacing manual API calls with structured query keys and hooks. This ensures stable caching, deduplication, and background updates while validating responses with Zod schemas for type safety.
The best way to validate TanStack Query responses with Zod in TypeScript is by deriving type-safe schemas directly from Zod. This prevents TS and Zod type drift while enforcing runtime validation, ensuring your fetched data matches expected structures securely.
Your React component keeps refetching data and missing loading states due to using useEffect for API calls without proper state management. Migrating to TanStack Query provides robust error handling, proper loading states, and background updates to resolve these pitfalls.
Yes, you can use TanStack Query v5 with Zod for structured query key invalidation. This combination enforces structured query keys for precise cache invalidation, scalable mutations, and type-safe schemas derived from Zod to prevent runtime validation errors.
To avoid prop drilling when sharing TanStack Query state across components, apply contextual patterns that simplify shared UI state. This approach ensures data fetching logic and state management remain scalable and accessible without passing props through multiple layers.
addisualemuCreate and edit API clients, endpoints, types, and data-fetching hooks in Expo applications.
Prathmesh2000Implement React Query patterns for server state management in React apps.
joncrangleEnforce type-safe routing and reactive data flows in SolidJS applications.
algusaemGuide React state management across local, global, and server state.
