Fetching with loading and error states

📘What it really is

• Every fetch has three states, and the screen must show each:
• loading: a spinner or skeleton ("Loading enquiries…");
• error: a clear message and a Try again button;

• success: the data, including the empty case (Module 32, Lesson 5).

• TanStack Query manages this for you:

npm install @tanstack/react-query

const queryClient = new QueryClient();
<QueryClientProvider client={queryClient}><App /></QueryClientProvider>

const { data, isPending, isError, error, refetch } = useQuery({
  queryKey: ["enquiries"],
  queryFn: getEnquiries,
});

if (isPending) return <p role="status">Loading enquiries…</p>;
if (isError) return <ErrorMessage message={error.message} onRetry={refetch} />;
return <EnquiryList enquiries={data} />;

• The query key names the data. Components asking for ["enquiries"] share one cached copy, and if they appear at the same time while the data is loading, they share that one request too. Later, the cache's settings decide whether a new request goes out (Lesson 4 covers staleTime). Include parameters in the key: ["enquiry", id].

• It also retries failed requests, refreshes data when you return to the tab, and avoids the effect bugs from Module 34.