How do I 2. fetch data using usequery hook?

## Test API Use [JSONPlaceholder](https://jsonplaceholder.typicode.com/todos?_limit=5) for todos. ## Implement useQuery In `src/App.tsx`: ```tsx import { useQuery } from '@tanstack/react-query' function App() { const { data, isPending, isError, error } = useQuery({ queryKey: ['todos'], queryFn: () => fetch('https://jsonplaceholder.typicode.com/todos?_limit=5').then(res => res.json()) }) if (isPending) return Loading... if (isError) return Error: {error.message} return ( {data?.map(todo => ( {todo.title} ))} ) } ``` Observe caching in devtools on refresh.

How do I 3. manage updates with usemutation?

## Add useMutation Update `App.tsx`: ```tsx import { useMutation, useQueryClient } from '@tanstack/react-query' const queryClient = useQueryClient() const mutation = useMutation({ mutationFn: newTodo => fetch('https://jsonplaceholder.typicode.com/todos', { method: 'POST', body: JSON.stringify(newTodo), headers: { 'Content-Type': 'application/json' } }).then(res => res.json()), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['todos'] }) } }) // Button: mutation.mutate({ title: 'New Todo', completed: false })}>Add Todo ``` Test adding todo; list auto-refreshes.

How do I 4. implement pagination and infinite queries?

## Basic Pagination ```tsx const { data } = useQuery({ queryKey: ['todos', { page: currentPage }], queryFn: () => fetch(`/todos?_page=${currentPage}&_limit=5`).then(res => res.json()) }) ``` ## Infinite Queries ```tsx import { useInfiniteQuery } from '@tanstack/react-query' const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['todos'], queryFn: ({ pageParam = 1 }) => fetch(`/todos?_page=${pageParam}&_limit=5`).then(res => res.json()), getNextPageParam: (lastPage, pages) => lastPage.length ? pages.length + 1 : undefined }) ``` Add scroll handler for next page.

How do I 5. apply best practices and build a mini todo app?

## Optimistic Updates In mutation: `onMutate: async newTodo => { await queryClient.cancelQueries... queryClient.setQueryData... }` ## Key Practices - Use structured query keys. - Enable refetchOnWindowFocus. - Test with devtools. ## Build Mini App Combine all: list todos, add/delete, paginate. Deploy to Vercel/Netlify. Review devtools for cache insights.

Master TanStack Query for React Data Fetching in 5 Steps

Q: How do I 1. set up react app and install tanstack query?

# Prerequisites - Basic React knowledge (hooks, components). - Node.js and npm installed. ## Create React App ```bash npx create-react-app my-query-app --template typescript cd my-query-app ``` ## Install TanStack Query ```bash npm install @tanstack/react-query npm install @tanstack/react-query-devtools ``` ## Configure QueryClient In `src/index.tsx`: ```tsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' const queryClient = new QueryClient() root.render( ) ``` Run `npm start` and verify devtools button appears.

🧰

Instant Toolkit

2 artifacts

📋
Step-by-Step Guide

1

Prerequisites

Basic React knowledge (hooks, components).
Node.js and npm installed.

Create React App

npx create-react-app my-query-app --template typescript
cd my-query-app

Install TanStack Query

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

Configure QueryClient

In src/index.tsx:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient()

root.render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
)

Run npm start and verify devtools button appears.

Why this step matters:

-Establishes the foundation for all data operations
-Enables caching and state sync across your app

30-45 minutes

Node.js, npm, VS Code, Create React App

$0

Definition of Done

•App runs without errors
•Devtools panel toggles in browser

Common Mistakes to Avoid

❌ Forgetting QueryClientProvider wrapper

→Wrap entire <App /> in <QueryClientProvider client={queryClient}>

❌ Installing outdated react-query package

→Use @tanstack/react-query for v5+

2

Following along, or just reading? 👀

Spin up a personalized “learn React Query” plan you can save, check off, and return to anytime — unlimited on the free trial.

Start free trial →

3

4

5

🎥
Suggested Videos

TanStack Query Full Course Tutorial

React Query Crash Course: Queries & Mutations

Simple TanStack Query Tutorial

📚
Learning Resources

📖 Online Courses

The Official React Query Course

beginner

Paid

query.gg

React Query / TanStack Query: Server State Management

intermediate

Paid

Udemy

React Query Tutorial for Beginners

beginner

YouTube Playlist

📖 Recommended Books

State Management with React Query

intermediate

by Daniel Afonso

🌐 Helpful Websites

TanStack Query React Docs

documentation

Official documentation with guides and API reference

TanStack Query GitHub

repository

Source code, examples, and issues

🛠️ Useful Tools

JSONPlaceholder

API

Free fake REST API for testing

TanStack Query Devtools

DevTools

Inspect queries, mutations, and cache

Master TanStack Query for React Data Fetching in 5 Steps