Installation & Basic Setup in React
From the TanStack Query cheat sheet · Setup & Configuration · verified Jul 2026
Installation & Basic Setup
Setting up TanStack Query in your React application
typescript
# Installation
npm install @tanstack/react-query
npm install @tanstack/react-query-devtools
// App.tsx - Setup QueryClient & Provider
import {
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
{/* Your app components */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}💡 DevTools are essential for debugging cache and queries
⚡ Configure default options to avoid repetition
📌 gcTime (garbage collection) was formerly called cacheTime
🟢 Start with default settings, optimize as needed
setupconfiguration