admin-dashboard-helper

React Query data fetching in admin dashboards requires configuring a QueryClientProvider in your app's root, then using hooks like useQuery and useMutation to manage server state. Set up the provider in modules/shared/Providers, define queries with consistent cache keys, and handle loading and error states for reliable data synchronization.

Zod form validation integrates with React Hook Form through the zodResolver adapter, which validates form data against your Zod schema before submission. Define your schema matching backend DTOs, pass it to useForm with zodResolver, and leverage error handling for consistent validation feedback across admin features.

Structure Axios API calls in admin dashboards by creating a core-api client with consistent error handling, request/response interceptors, and typed endpoints matching backend DTOs. Integrate this client with React Query mutations and queries to ensure all admin features share the same reliable API communication pattern.

React Query cache invalidation ensures admin dashboard data stays fresh by invalidating relevant queries after mutations. Use queryClient.invalidateQueries() with specific query keys after create, update, or delete operations to automatically refetch affected data and maintain UI consistency.

Follow the modules/[feature]/ directory structure and shared/Providers pattern when adding admin features. Organize components, hooks, types, and API calls by feature module, centralize React Query and form providers, and maintain TypeScript typing consistency with backend DTOs for scalable, maintainable admin applications.

This approach handles robust error handling and loading states through React Query's built-in status tracking, Axios interceptors for API errors, and Zod validation errors. Implement conditional rendering based on isLoading, isError states, display user-friendly error messages, and manage loading indicators consistently across admin pages.