skills.rest
kibertoad
kibertoadCOMMUNITY
Explore all skills by this author →
Website𝕏@kibertoadGitHub

add-api-query

Automate data fetching and mutation with API contracts, typed HTTP client, and React Query.

1|Updated Mar 27, 2026
Search Tags:#typescript#modularization#react-query#fetching#api-contracts#http-client
One-click install
npx skills add https://github.com/kibertoad/tanstack-react-modules --skill add-api-query
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-api-query
Source: https://github.com/kibertoad/tanstack-react-modules/tree/main/skills/add-api-query
Command: npx skills add https://github.com/kibertoad/tanstack-react-modules --skill add-api-query

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill reduces boilerplate by providing a standard pattern to fetch and mutate data using API contracts, a typed HTTP client, and React Query.

Core Features & Use Cases

  • Provides a consistent data layer for module components through API contracts, http client, and React Query.
  • Supports GET, POST, PUT/PATCH, and DELETE workflows via contracts and the frontend HTTP client.
  • Enables easy integration of new backend contracts across modules with automatic type safety and query invalidation.

Quick Start

Create or import an API contract, wire it to the http client, and use useQuery or useMutation to fetch or mutate data in a module component.

Frequently Asked Questions about add-api-query

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

FAQPage Schema
How do I reduce boilerplate when fetching data with React Query and API contracts?▼

Reduce boilerplate by using a standard pattern to fetch and mutate data through API contracts, a typed HTTP client, and React Query for caching and automatic query invalidation across module components.

What is the best way to integrate new backend contracts across multiple React modules?▼

Integrate new backend contracts by importing them into your module, wiring them to the frontend HTTP client, and using React Query's useQuery or useMutation to achieve automatic type safety and data synchronization.

Does this React Query data fetching pattern support POST, PUT, and DELETE workflows?▼

Yes, this data fetching pattern supports GET, POST, PUT/PATCH, and DELETE workflows by executing API contracts through the typed frontend HTTP client and managing state with React Query.

How do I use buildRestContract from @lokalise/api-contracts with a typed HTTP client?▼

Use buildRestContract to define your API contracts, then wire those contracts to the frontend HTTP client and execute them via React Query hooks to handle fetching, creating, updating, or deleting server data.

When do I need API contracts for React Query data fetching?▼

You need API contracts for React Query data fetching when module components require type-safe interactions with server data, ensuring consistent data synchronization and automatic query invalidation across your application.

Can I use this API contract pattern with contracts sourced from app-shared re-exports?▼

Yes, you can use this pattern with contracts sourced from backend packages or app-shared re-exports, applying them directly to your module components to maintain a consistent data layer.

Related Skills

Explore More Software Engineering Skills→
Quanby-IT-SolutionsQuanby-IT-Solutions
2

orpc-contracts

Define API contracts and endpoints using oRPC contracts for NestJS and Next.js.

Official
Advanced
blencorpblencorp
101

tanstack-query

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

Official
Intermediate
diadia0000diadia0000

dungeon-index

Rebuild and re-export public API types and functions for the dungeon module in TypeScript.

Community
Advanced
Yoriichi-DangYoriichi-Dang

tanstack-query

Manage React server state with TanStack Query v5 hooks.

Community
Advanced