tanstack-querylisted
Install: claude install-skill louisbrulenaudet/monorepo-template
## 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