TanStack Query

Overview

TanStack Query (v5, package @tanstack/react-query) manages server state: it caches responses by query key, dedupes requests, refetches in the background and gives mutations a lifecycle for optimistic UI. It needs React 18 or newer. These examples use the v5 object-only API; v4 names (cacheTime, isLoading as "no data yet", keepPreviousData, onSuccess on useQuery) no longer exist.

Instructions

Setup

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

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