Back to Home
React logoReact INTERMEDIATE

TanStack Query

TanStack Query cheat sheet with useQuery, useMutation, caching strategies, optimistic updates, and server state management examples.

10 min read
tanstack-queryreact-queryreactdata-fetchingcacheserver-statemutations

Other React Sheets

React Components & JSXBEGINNERReact Custom HooksADVANCEDReact Design PatternsADVANCEDReact HooksINTERMEDIATEReact Router v7INTERMEDIATETanStack RouterINTERMEDIATE

Setup & Configuration

Installing and configuring TanStack Query

Installation & Basic Setup

Setting up TanStack Query in your React application

typescript
💡 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

Queries

Fetching and caching server data

Basic Query

Using useQuery for data fetching

typescript
💡 Query keys must be unique and serializable arrays
⚡ Use enabled option to conditionally fetch data
📌 isLoading vs isFetching: loading is initial, fetching includes refetch
🟢 Always handle loading and error states
queriesfetching

Dependent Queries

Queries that depend on other queries

typescript
💡 Use enabled option to control query execution order
⚡ Each query maintains its own cache independently
📌 Handle loading states for each dependent query
🟢 Structure query keys hierarchically for clarity
queriesdependentsequential

Parallel Queries

Running multiple queries simultaneously

typescript
💡 useQueries for dynamic arrays, individual queries for fixed count
⚡ Parallel queries execute simultaneously for better performance
📌 combine option in v5 helps aggregate results
🟢 Promise.all in single query for tightly coupled data
queriesparallelmultiple

Mutations

Creating, updating, and deleting data

Basic Mutations

Using useMutation for data modifications

typescript
💡 onMutate enables optimistic updates for instant UI feedback
⚡ mutateAsync returns a promise for async/await usage
📌 Always invalidate related queries after mutations
🟢 Use mutate for fire-and-forget, mutateAsync when you need the result
mutationscreateoptimistic

Update & Delete Mutations

Implementing update and delete operations

typescript
💡 Update specific cache entries with setQueryData
⚡ Optimistic deletes provide instant feedback
📌 Always provide rollback logic in onError
🟢 Use removeQueries to clean up deleted item caches
mutationsupdatedeletecrud

Infinite Queries

Implementing pagination and infinite scroll

Infinite Scroll

Loading data progressively with useInfiniteQuery

typescript
💡 Use intersection observer for automatic loading
⚡ getNextPageParam determines pagination logic
📌 pages array contains all loaded pages in order
🟢 Provide manual load button as fallback
infinitepaginationscroll

Cache Management

Managing and manipulating the query cache

Cache Operations

Working with the QueryClient cache

typescript
💡 Invalidation marks data stale and triggers refetch
⚡ Prefetch data before users need it for instant loading
📌 setQueryData for optimistic updates without server call
🟢 Use exact: true for precise cache key matching
cacheinvalidationprefetch

Advanced Patterns

Advanced TanStack Query patterns and techniques

Suspense & Error Boundaries

Using React Suspense with TanStack Query

typescript
💡 useSuspenseQuery guarantees data is always defined
⚡ Combine with ErrorBoundary for complete error handling
📌 QueryErrorResetBoundary resets queries on error recovery
🟢 Great for SSR and concurrent features
suspenseerror-boundaryadvanced

Custom Hooks & Patterns

Building reusable query hooks and patterns

typescript
💡 Create custom hooks to encapsulate query logic
⚡ Generic CRUD hooks reduce boilerplate significantly
📌 Debounced queries prevent excessive API calls
🟢 Keep hooks focused on single responsibility
hookspatternsreusable

More React Cheat Sheets

React Components & JSX

BEGINNER12 min

React Hooks

INTERMEDIATE8 min

React Custom Hooks

ADVANCED20 min