TanStack Query (React Query): Handling HTTP Requests with Ease

TanStack Query (formerly React Query) is a library for fetching, caching, and synchronizing server data. It replaces hand-written useEffect + useState fetching logic.

useQuery runs a query function, caches its result under a queryKey, and returns the request's state.

TanStack Query stores every query result in the QueryClient cache under its key, shows cached data instantly, and refetches in the background when the data is stale.

Query keys can include variables, giving each combination its own cache entry. The queryFn receives an AbortSignal to cancel outdated requests.

enabled: false stops a query from running automatically until a condition is met.

useMutation handles requests that change data (POST, PUT, DELETE). Unlike useQuery, it doesn't run automatically; you trigger it with mutate().

queryClient.invalidateQueries() marks cached queries as stale and refetches the ones currently on screen, so the UI shows the latest data after a mutation.

Updating the UI before the server responds, assuming success, then rolling back if the request fails.

Conventions that keep query keys, fetch functions, and components maintainable as the app grows.