Remote data is application data whose authoritative value lives on a server. In a bookings app, bookables, bookings, and users may be requested repeatedly as users move between pages. Without coordination, each page waits for data that another page already loaded. section 10.3.1 section 10.3
React Query treats remote data as server state and coordinates its client-side lifecycle:
- Cache previously fetched results so navigation can reuse them. section 10.3.1
- Deduplicate simultaneous requests for the same data. section 10.3.1
- Refetch stale data in the background while exposing loading, status, and error information. section 10.3.1 section 10.3
- Update server state through mutations and coordinate the query cache afterward. section 10.3
A smoother bookings workflow
With a delayed json-server response, the Bookables page initially shows a loading indicator. After the bookables load, navigating to Bookings can reuse cached data instead of reloading it, while background fetching obtains newer results. section 10.3.1
const {data, status, error} = useQuery(key, () => fetch(url));
A useQuery listing shows the compact connection between a query key, fetch function, returned data, status, and error state. section 10.4
