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

Continue with TanStack Query

Save the full cheat sheet or work through every related task.

Back to the full TanStack Query cheat sheet