Is it compatible with React Router loaders?

Yes, it includes specialized patterns for prefetching data within React Router loaders to eliminate loading waterfalls and improve perceived performance.

How does it handle error management?

It promotes centralized error handling using QueryCache.onError and interceptors for consistent global response and error management.

Can I use this with generated OpenAPI clients?

Absolutely; it includes specific rules for @hey-api/openapi-ts and similar generated client setups using the react-query plugin.

Does this skill support TanStack Query v5?

Yes, it is specifically designed around TanStack Query v5 patterns, including the latest architectural recommendations.

Does it help with testing and mocking?

Yes, it provides structured guidelines for organizing Mock Service Worker (MSW) handlers for both local development and automated testing.

React API Layer (TanStack Query)

Name: React API Layer (TanStack Query)
Author: ng-hai

byng-hai

•

API開発

Standardizes the construction and management of robust API layers in React applications using TanStack Query v5 and ky.

The API Layer skill provides a comprehensive framework for building production-ready data fetching layers in React applications. It guides Claude in implementing industry best practices—informed by TkDodo's Practical React Query—covering both generated OpenAPI clients and manual fetchers. The skill ensures consistent query key management, optimized caching strategies, optimistic updates, and centralized error handling, making it an essential tool for developers looking to standardize their application's network communication and state synchronization logic.

主な機能

01Supports both @hey-api generated clients and manual ky-based fetchers

02Configures advanced caching strategies including staleTime management and optimistic updates

034 GitHub stars

04Automates MSW handler organization for seamless development and testing

05Implements Feature Query Object patterns for centralized key and mutation management

06Integrates React Router loaders with prefetching using ensureQueryData

ユースケース

01Implementing complex optimistic updates for collaborative UI features

02Architecting a new data fetching layer for high-performance React dashboards

03Refactoring legacy fetch/useEffect patterns into standardized TanStack Query hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude api-layer

For use in Claude.ai and ChatGPT

Download Skill