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
Back to the full TanStack Query cheat sheet