Domain: Coding
Difficulty: Difficult
Description:
Currently, the application uses basic fetch() calls scattered throughout components. Refactor data fetching to:
- Create custom React Query hooks (useActorSearch, useProductionSearch, etc.)
- Implement proper error handling and retry logic
- Add automatic caching with configurable staleTime
- Support infinite queries for pagination
- Handle loading and error states consistently
- Add request deduplication
- Implement background refetching for real-time data
Expected Outcome:
- Custom hooks for all API calls
- Centralized data fetching logic
- Better performance through caching
- Consistent error handling
- Easier component testing
- Reduced code duplication
Setup Steps:
- Create src/hooks/api/ directory
- Create hook file: useActorSearch.ts.
- Create hook file: useProductionSearch.ts.
- Create hook file: useSharedCastings.ts.
- Implement using @tanstack/react-query (already in dependencies)
- Update component pages to use new hooks
- Configure QueryClient with optimal settings
- Test caching behavior and error states
Links/References:
- Dependency: @tanstack/react-query (v5.71.1) - already installed
- Existing client: src/hooks/client-providers.tsx.
- Documentation: React Query Docs