skills.rest
Tuienn
TuiennCOMMUNITY
Explore all skills by this author →
GitHub

handle-api-service

Standardize API service functions and TanStack Query integration in React.

Updated Jan 19, 2026
Search Tags:#typescript#frontend#api#i18n#react-query#tanstack-query#service-pattern
One-click install
npx skills add https://github.com/Tuienn/e-notarization --skill handle-api-service
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: handle-api-service
Source: https://github.com/Tuienn/e-notarization/tree/main/web-frontend/.cursor/skills/handle-api-service
Command: npx skills add https://github.com/Tuienn/e-notarization --skill handle-api-service

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a standardized blueprint for creating API service functions and wiring them to TanStack Query (React Query) in React components. It helps teams implement consistent GET queries (useQuery) and mutations (useMutation), along with type definitions, error handling, notification flows, and i18n patterns.

Core Features & Use Cases

  • Unified service pattern: Centralizes GET and mutation functions under a single class with a shared API wrapper.
  • Component integration: Demonstrates how to connect services to React components via useQuery and useMutation with proper caching and error handling.
  • i18n readiness: Includes guidance to use react-i18next for translated notifications when an i18n setup exists.

Quick Start

Create a new service file under src/services/gin, following the provided examples, then wire a GET operation with useQuery and a POST/PUT/PATCH/DELETE operation with useMutation. If i18n is present, wrap notification messages with useTranslation and t().

Frequently Asked Questions about handle-api-service

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

FAQPage Schema
How do I standardize API service functions with TanStack Query in React?▼

Wire TanStack Query to API services by defining typed useQuery hooks for GET requests and useMutation hooks for POST, PUT, PATCH, or DELETE operations within a centralized service class structure.

What is the best way to structure React Query mutations and GET queries in a TypeScript project?▼

Structure React Query mutations and GET queries by grouping API functions into a unified service pattern. This TypeScript approach provides proper caching, error handling, and seamless component integration for data fetching.

Does this API service pattern support i18n notifications for React Query errors?▼

Yes, the API service pattern supports i18n notifications. It provides guidance to integrate react-i18next, allowing you to wrap notification messages with the useTranslation hook and t() function for translated alerts.

Can I use this React Query service pattern without an existing i18n setup?▼

You can use the React Query service pattern without an existing i18n setup. The i18n integration is optional readiness guidance, meaning standard notifications still function even if react-i18next is not configured in your project.

Why do I need a ginApiService wrapper for frontend API service standardization?▼

A ginApiService wrapper is needed to centralize API request logic and error handling before wiring functions to TanStack Query. It enforces consistent typing and standardizes responses across all service class methods.

Related Skills

Explore More Software Engineering Skills→
NevaberryNevaberry
22

trpc-knowledge-patch

Guide tRPC v10 to v11 migrations with TypeScript and Node requirements.

Official
Advanced
blencorpblencorp
101

tanstack-query

Fetch and manage server-state data with TanStack Query v5 hooks.

Official
Intermediate
MadAppGangMadAppGang
278

tanstack-query

Manage server state and data fetching in React with TanStack Query v5.

Official
Intermediate
modrinthmodrinth
2.3k

tanstack-query

Convert useAsyncData and manual ref patterns to TanStack Query hooks.

Official
Intermediate