fe-service-hook

Generate TanStack Query hooks for ApiSDK data fetching and mutations.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-service-hook
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fe-service-hook
Source: https://github.com/lety-ai/lety-skill-hub/tree/main/plugins/react-query/skills/react-query
Command: npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-service-hook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This solution helps frontend teams rapidly generate TanStack Query v5 hooks that integrate with ApiSDK-powered APIs, reducing boilerplate and ensuring consistent data management.

Core Features & Use Cases

  • Automatically generate useQuery and useMutation hooks following the project's ApiSDK pattern.
  • Organize hooks under features/<feature>/services/ with standard filenames (get-<feature>.ts, get-<feature>-list.ts, create-<feature>.ts, update-<feature>.ts, delete-<feature>.ts).
  • Supports TypeScript and ApiSDK Axios client usage, with global defaults for staleTime, cacheTime, and refetch behavior.

Quick Start

Provide the operation type, resource name, and OpenAPI method name to generate the corresponding TanStack Query hook.

Frequently Asked Questions about fe-service-hook

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

FAQPage Schema
How do I generate TanStack Query hooks for an API SDK?

You generate TanStack Query hooks for an API SDK by providing the operation type, resource name, and OpenAPI method name to automatically create useQuery and useMutation hooks integrated with your ApiSDK.

How do I structure TanStack Query hooks for create, update, and delete operations?

TanStack Query hooks for create, update, and delete operations are structured under features/<feature>/services/ using standard filenames like create-<feature>.ts and update-<feature>.ts to organize entity workflows.

Do I need OpenAPI operation names to generate useMutation hooks with TanStack Query?

Yes, you need OpenAPI operation names along with ApiSDK and TypeScript to correctly generate useMutation hooks that route through the ApiSDK Axios client.

How does TanStack Query handle cache invalidation for API SDK data fetching?

TanStack Query handles cache invalidation for API SDK data fetching by applying standardized caching, invalidation, and error handling patterns with global defaults for staleTime and cacheTime.

Can I use this approach to generate paginated list queries for React features?

Yes, you can generate paginated list queries for React features by specifying the list operation type and resource name to create a get-<feature>-list.ts hook with standard refetch behavior.

What is the best way to reduce boilerplate when wiring data-fetching mutations in React?

The best way to reduce boilerplate when wiring data-fetching mutations in React is to automatically generate useMutation hooks that follow your project's ApiSDK pattern for consistent data management.