react-data

Migrate React/TypeScript data fetching from useEffect to TanStack Query with Zod schemas.

13|Updated Mar 15, 2019

Search Tags:#typescript #react #zod #best-practices #state-management #tanstack-query #data-fetching

Ready to run

npx skills add https://github.com/WTFox/dotfiles --skill react-data

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

TanStack Query-based data fetching with proper caching, error handling, and background updates
Structured query keys for precise cache invalidation and scalable mutations
Type-safe schemas derived from Zod, preventing TS/Zod drift and runtime validation
Contextual patterns to avoid prop drilling and simplify shared UI state

Quick Start

Convert a useEffect data fetch to TanStack Query and validate responses with a Zod schema to ensure type-safety and correct caching.

Frequently Asked Questions about react-data

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

FAQPage Schema

How do I migrate React data fetching from useEffect to TanStack Query?▼

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.

What is the best way to validate TanStack Query responses with Zod in TypeScript?▼

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.

Why does my React component keep refetching data and missing loading states?▼

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.

Can I use TanStack Query v5 with Zod for structured query key invalidation?▼

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.

How to avoid prop drilling when sharing TanStack Query state across components?▼

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.