frontend-data-layer

TanStack Query replaces scattered fetch logic by providing structured server-state management through a centralized apiRequest entrypoint, enforced queryKey consistency, and standardized caching policies, moving away from fragile useState and useEffect patterns.

Implement a single apiRequest entrypoint layer with typed TypeScript endpoints to handle listings, bookings, and authentication flows. This abstraction ensures consistent headers, centralized error parsing, and typed responses across your React application.

Handle optimistic updates and cache invalidation by applying TanStack Query mutation patterns that utilize invalidateQueries. This approach automatically refetches affected data, such as invalidating bookings after a mutation, ensuring UI consistency.

Yes, this server-state management approach enforces three-state page handling by standardizing loading skeletons, retryable error states, and empty states. This ensures consistent UX across React components during data fetching and mutation processes.

Configure filter-aware queryKeys by creating typed hooks, such as a useListings hook, that pass filter parameters directly into the queryKey array. This ensures TanStack Query caches and refetches data accurately based on active filters.

Your component keeps refetching data instead of using the TanStack Query cache due to inconsistent queryKeys or unconfigured QueryClient defaults. Enforcing centralized stale time, cache retention, and refetch behavior policies resolves this server-state issue.