react-query

# React Query Skill Expert assistance for implementing TanStack Query (React Query) for server state management in React applications. ## Capabilities - Configure QueryClient with optimal defaults - Implement queries with caching strategies - Handle mutations with optimistic updates - Set up infinite queries for pagination - Manage query invalidation and prefetching - Integrate with authentication and error handling ## Usage Invoke this skill when you need to: - Fetch and cache server data - Handle mutations with rollback - Implement infinite scroll or pagination - Prefetch data for navigation - Synchronize server state ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | endpoint | string | Yes | API endpoint to query | | queryKey | array | Yes | Unique query key | | staleTime | number | No | Time until data is stale (ms) | | cacheTime | number | No | Time to keep in cache (ms) | | optimisticUpdate | boolean | No | Enable optimistic updates | ### Configuration Example ```json { "endpoint": "/api/users", "queryKey": ["users"], "staleTime": 300000, "cacheTime": 600000, "optimisticUpdate": true } ``` ## Generated Patterns ### Query Client Setup ```typescript import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5, // ...