skills.rest
Awais68
Awais68COMMUNITY
Explore all skills by this author →
WebsiteGitHub

api-client

Implement an Axios API client with JWT refresh and Zod validation.

Updated Jan 10, 2026
Search Tags:#Zod#error-handling#JWT#api-client#TanStack-Query#Axios
One-click install
npx skills add https://github.com/Awais68/h2_phase_3_Chatbot_Todo --skill api-client-awais68
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: api-client
Source: https://github.com/Awais68/h2_phase_3_Chatbot_Todo/tree/main/.claude/skills/api-client
Command: npx skills add https://github.com/Awais68/h2_phase_3_Chatbot_Todo --skill api-client-awais68

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

API clients often lack a cohesive architecture for authentication, error handling, and type-safe responses. This Skill provides a guided approach to implement a robust API client with automatic JWT attachment, token refresh flows, and runtime validation.

Core Features & Use Cases

  • TanStack Query v5 integration for caching, retries, and structured data fetching
  • Axios-based HTTP client with request/response interceptors for JWT management
  • Global error handling with toasts and consistent UX across API calls
  • Zod-based validation for runtime type-safe responses
  • Support for mutations, pagination, and optimistic UI updates

Quick Start

Install dependencies and set up the API client, then initialize a QueryClient and wrap your application with QueryClientProvider. Use the provided hooks to fetch data and mutate state with built-in error handling and type safety.

Frequently Asked Questions about api-client

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

FAQPage Schema
How do I handle 401 errors with automatic token refresh in Axios?▼

Handle 401 errors with automatic token refresh by using Axios request and response interceptors to attach JWTs, catch failures, and retry requests after refreshing the token.

How do I validate TanStack Query responses with Zod for runtime type safety?▼

Validate TanStack Query responses with Zod by defining schemas and parsing API data through them, ensuring runtime type safety and preventing unexpected payload shapes from breaking your application.

What is the best way to set up global API error toasts for Axios requests?▼

Set up global API error toasts for Axios requests by configuring response interceptors within your HTTP client to catch errors globally and trigger UI notifications for consistent user feedback.

Does this API client approach support pagination and optimistic UI updates?▼

Yes, this API client approach supports pagination and optimistic UI updates through TanStack Query v5 integration, allowing structured data fetching, mutations, and immediate UI state synchronization.

How do I attach JWT tokens automatically to HTTP requests in a React application?▼

Attach JWT tokens automatically to HTTP requests by configuring an Axios-based client with request interceptors that inject the authentication header before sending the network call.

Related Skills

Explore More Software Engineering Skills→
WalshingtonWalshington

tanstack-query

Manage server-state in React apps with TanStack Query v5 object-syntax hooks.

Community
Advanced
gizixgizix
2

query-patterns

Implement TanStack Query data-fetching patterns for React and TypeScript applications.

Community
Intermediate
cole-robertsoncole-robertson
36

inertia-rails-forms

Build Inertia Rails forms with useForm for state, validation, and file uploads.

Community
Basic
opzero1opzero1
3

http-client

Detect axios, ky, or fetch and apply matching TypeScript API templates.

Official
Advanced