add-empty-error-states

To add empty and error states to TanStack Query components, trace useQuery or useSuspenseQuery hooks to insert required branch handling, reuse existing UI primitives, and ensure user-safe error messaging with dev-gated details and retry functionality.

The best way to handle empty UI states is to validate the data-fetch entry points and render a clear, actionable UI, preferentially reusing the project’s existing EmptyState component to maintain visual consistency across the application.

To safely display error details in a React frontend, show a human-readable message and retry option to the user, while gating raw error specifics so they only surface during development for debugging purposes.

Yes, this error handling approach works with TanStack Router by targeting loader-based rendering and loader consumption sites after the data-fetch wiring is in place, ensuring correct empty and error handling for each fetch surface.

A component breaks on useQuery fetch failure without an ErrorBoundary because it lacks the required error handling branch, which must render user-safe messaging and retry affordance instead of crashing the application.

Yes, you can reuse existing UI primitives when adding retry logic, as the process preferentially selects the project’s existing EmptyState or ErrorState patterns and only proposes a minimal matching component if nothing fits.