api-clientlisted

# API Client Skill ## Overview Expert guidance for API client implementation using TanStack Query/Axios, including JWT token attachment via interceptors, global error handling with toasts, type-safe response parsing with Zod, and offline detection for robust data fetching. ## When This Skill Applies This skill triggers when users request: - **API Setup**: "Setup API client", "Configure TanStack Query", "Axios instance" - **Data Fetching**: "Fetch student data", "Get attendance", "API calls" - **JWT/Token**: "Attach JWT token", "Bearer token headers", "Token refresh" - **Error Handling**: "API error toast", "Handle 401", "Retry failed requests" - **Response Parsing**: "Type-safe responses", "Zod validation", "Parse API data" - **Pagination**: "Paginated list", "Infinite query", "Load more data" ## Core Rules ### 1. Setup: TanStack Query Configuration ```typescript // lib/queryClient.ts import { QueryClient } from '@tanstack/react-query'; export const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 60 * 1000, // 5 minutes gcTime: 10 * 60 * 1000, // 10 minutes retry: 3, retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), }, mutations: { retry: 1, }, }, }); // app/layout.tsx or app/providers.tsx 'use client'; import { QueryClientProvider } from '@tanstack/react-query'; import { queryClient } from '@/lib/queryClient'; export function Providers({ children }: { children: Reac