skills.rest
AhmedElbialy148
AhmedElbialy148COMMUNITY
Explore all skills by this author →
GitHub

react-data

Standardizes client-side data fetching in React SPAs with TanStack Query, Zod validation, and typed API errors.

Updated Oct 7, 2023
Search Tags:#typescript#react#data fetching#zod#cache invalidation#api client#tanstack-query
One-click install
npx skills add https://github.com/AhmedElbialy148/Portfolio --skill react-data-ahmedelbialy148
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-data
Source: https://github.com/AhmedElbialy148/Portfolio/tree/main/.cursor/skills/react-data
Command: npx skills add https://github.com/AhmedElbialy148/Portfolio --skill react-data-ahmedelbialy148

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, zod, and includes references (resource) and assets (resource) components.

What problem does it solve? React SPAs often accumulate ad-hoc fetch calls, untyped network responses, and inconsistent error handling. This Skill enforces a single contract for the client-side data layer: one API client, Zod validation at the network boundary, TanStack Query for reads, precise cache invalidation for mutations, and normalized typed errors. ## Core Features & Use Cases - Typed API client: A drop-in shared/api/client.ts that handles base URLs, auth headers, timeouts, and response envelopes, throwing typed ApiError subclasses. - TanStack Query patterns: Query key factories, hook placement conventions, stale time defaults, prefetching, and Suspense support for reads. - Mutation and cache management: Precise invalidation rules, optimistic updates with rollback, and direct cache patches. - Zod boundary validation: Schemas for entities, forms, URL params, and localStorage so no network value is ever type-asserted. - Use Case: When migrating a component that fetches data in useEffect with manual loading state, this Skill converts it to a validated entity fetch function wrapped in a query hook with proper error branching. ## Quick Start Ask the AI to refactor a component that fetches data with useEffect into a TanStack Query hook with Zod validation following the react-data standard.

Frequently Asked Questions about react-data

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

FAQPage Schema
How do I fetch data in React with TanStack Query?▼

Create an entity fetch function in `entities/<entity>/api/` that calls the shared API client and validates the response with Zod, then wrap it in a `useQuery` hook in `model/` with a centralized query key. Components import the hook, never the fetcher directly.

How do I validate API responses with Zod in TypeScript?▼

Define a Zod schema in the entity's `model/types.ts`, receive the network response as `unknown`, and call `Schema.parse(json)` before returning it. Never use `as User` type assertions on network JSON, since they bypass runtime checks.

How do I migrate from useEffect fetch to TanStack Query?▼

Replace `useEffect(() => { fetch(...).then(setData) }, [])` with `useQuery({ queryKey, queryFn })`. Manual loading and error state become the query's `isPending` and `error`, and parameter changes are handled by including the param in the query key for automatic refetching.

How should mutations invalidate the TanStack Query cache?▼

Invalidate only the query keys that actually changed: detail keys after updates, list keys after creates or deletes. Never call `invalidateQueries()` with no key, since that clears the entire cache. When the response is authoritative, patch the cache directly with `setQueryData` instead.

Can I use this data layer with APIs that do not use the response envelope?▼

Yes. For third-party APIs without the `{ ok, data, error }` envelope, add a separate raw client in `shared/api/raw-client.ts` that checks `res.ok` and throws `NetworkError` on failure. The main typed client remains reserved for envelope-conforming APIs.

Why should UI branch on error codes instead of HTTP status?▼

The API client maps failures to typed `ApiError` subclasses carrying a stable machine-readable `code` like `not_found` or `rate_limited`. Branching on `error.code` with the `isApiError` type guard is more reliable than parsing status numbers or message text.

Related Skills

Explore More Software Engineering Skills→
atilladenizatilladeniz
2

fsd-architecture

Organize Next.js/React projects using Feature-Sliced Design layer hierarchy.

Community
Intermediate
davila7davila7
30.5k

react-ui-patterns

Implements React UI patterns for loading states, error handling, and data fetching.

Community
Intermediate
madooeimadooei
1

test-utility-service

Automate external API and authentication tests with mocked fetch calls.

Community
Intermediate
yahav123147yahav123147

react-server-components

Implement React Server Components in Next.js App Router with server/client boundaries.

Community
Advanced