React Query manages server state in React applications, reducing repeated loading indicators when views reuse the same data. It caches results, deduplicates requests, refreshes stale data in the background, and exposes status information for responsive interfaces. section 10.3 section 10.3.1
A typical setup proceeds through three focused steps:
- Create a QueryClient and provide it around the application with QueryClientProvider. section 10.4
- Fetch data with useQuery by supplying a query key, fetch function, and optional configuration such as initialData. section 10.3 section 10.4
- Update server state with useMutation, then respond to completion through its mutation function and configuration. section 10.3 section 10.4
Shared bookables across application views
A bookings app loads bookables on both the Bookables and Bookings pages. Without caching, navigation reloads the same data and shows another loading indicator. React Query lets both views reuse cached data while background fetching obtains newer results; queryClient.getQueryData can also seed a query from an existing cache entry. section 10.3.1 section 10.4
const queryClient = new QueryClient();
export default function App () {
return (
<QueryClientProvider client={queryClient}>
{/* app JSX */}
</QueryClientProvider>
);
}
Use the provider listing to see the minimal client setup that makes React Query available throughout the component tree. section 10.4
