tanstack-query

## Overview TanStack Query (formerly React Query) manages server state - data that lives on the server and needs to be fetched, cached, synchronized, and updated. It provides automatic caching, background refetching, stale-while-revalidate patterns, pagination, infinite scrolling, and optimistic updates out of the box. **Package:** `@tanstack/react-query` **Devtools:** `@tanstack/react-query-devtools` **Current Version:** v5 ## Installation ```bash npm install @tanstack/react-query npm install -D @tanstack/react-query-devtools # Optional ``` ## Setup ```tsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60, // 1 minute gcTime: 1000 * 60 * 5, // 5 minutes (garbage collection) retry: 3, refetchOnWindowFocus: true, refetchOnReconnect: true, }, }, }) function App() { return ( <QueryClientProvider client={queryClient}> <YourApp /> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ) } ``` ## Core Concepts ### Query Keys Query keys uniquely identify cached data. They must be serializable arrays: ```tsx // Simple key useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) // With variables (dependency array pattern) useQuery({ queryKey: ['todos', { status, page }], queryFn: fetchTodos }) // Hierarchical keys for...