This commit is contained in:
@@ -1,123 +1,116 @@
|
||||
# ADR-0005 Master Migration Status
|
||||
|
||||
**Last Updated**: 2026-01-08
|
||||
**Last Updated**: 2026-01-10
|
||||
|
||||
This document tracks the complete migration status of all data fetching patterns in the application to TanStack Query (React Query) as specified in ADR-0005.
|
||||
|
||||
## Migration Overview
|
||||
|
||||
| Category | Total | Migrated | Remaining | % Complete |
|
||||
|----------|-------|----------|-----------|------------|
|
||||
| **User Features** | 5 queries + 7 mutations | 12/12 | 0 | ✅ 100% |
|
||||
| **Admin Features** | 3 queries | 0/3 | 3 | ❌ 0% |
|
||||
| **Analytics Features** | 2 queries | 0/2 | 2 | ❌ 0% |
|
||||
| **Legacy Hooks** | 3 hooks | 0/3 | 3 | ❌ 0% |
|
||||
| **TOTAL** | 20 items | 12/20 | 8 | 🟡 60% |
|
||||
| Category | Total | Migrated | Remaining | % Complete |
|
||||
| ---------------------- | ------------------------ | -------- | --------- | ---------- |
|
||||
| **User Features** | 7 queries + 8 mutations | 15/15 | 0 | ✅ 100% |
|
||||
| **User Hooks** | 3 hooks | 3/3 | 0 | ✅ 100% |
|
||||
| **Admin Features** | 4 queries + 3 components | 7/7 | 0 | ✅ 100% |
|
||||
| **Analytics Features** | 3 queries + 2 components | 5/5 | 0 | ✅ 100% |
|
||||
| **Legacy Hooks** | 4 items | 4/4 | 0 | ✅ 100% |
|
||||
| **Phase 8 Queries** | 3 queries | 3/3 | 0 | ✅ 100% |
|
||||
| **Phase 8 Components** | 3 components | 3/3 | 0 | ✅ 100% |
|
||||
| **TOTAL** | 40 items | 40/40 | 0 | ✅ 100% |
|
||||
|
||||
---
|
||||
|
||||
## ✅ COMPLETED: User-Facing Features (Phase 1-3)
|
||||
|
||||
### Query Hooks (5)
|
||||
### Query Hooks (7)
|
||||
|
||||
| Hook | File | Query Key | Status | Phase |
|
||||
|------|------|-----------|--------|-------|
|
||||
| useFlyersQuery | [src/hooks/queries/useFlyersQuery.ts](../src/hooks/queries/useFlyersQuery.ts) | `['flyers', { limit, offset }]` | ✅ Done | 1 |
|
||||
| useFlyerItemsQuery | [src/hooks/queries/useFlyerItemsQuery.ts](../src/hooks/queries/useFlyerItemsQuery.ts) | `['flyer-items', flyerId]` | ✅ Done | 2 |
|
||||
| useMasterItemsQuery | [src/hooks/queries/useMasterItemsQuery.ts](../src/hooks/queries/useMasterItemsQuery.ts) | `['master-items']` | ✅ Done | 2 |
|
||||
| useWatchedItemsQuery | [src/hooks/queries/useWatchedItemsQuery.ts](../src/hooks/queries/useWatchedItemsQuery.ts) | `['watched-items']` | ✅ Done | 1 |
|
||||
| useShoppingListsQuery | [src/hooks/queries/useShoppingListsQuery.ts](../src/hooks/queries/useShoppingListsQuery.ts) | `['shopping-lists']` | ✅ Done | 1 |
|
||||
| Hook | File | Query Key | Status | Phase |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------- | ------------------------------- | ------- | ----- |
|
||||
| useFlyersQuery | [src/hooks/queries/useFlyersQuery.ts](../src/hooks/queries/useFlyersQuery.ts) | `['flyers', { limit, offset }]` | ✅ Done | 1 |
|
||||
| useFlyerItemsQuery | [src/hooks/queries/useFlyerItemsQuery.ts](../src/hooks/queries/useFlyerItemsQuery.ts) | `['flyer-items', flyerId]` | ✅ Done | 2 |
|
||||
| useMasterItemsQuery | [src/hooks/queries/useMasterItemsQuery.ts](../src/hooks/queries/useMasterItemsQuery.ts) | `['master-items']` | ✅ Done | 2 |
|
||||
| useWatchedItemsQuery | [src/hooks/queries/useWatchedItemsQuery.ts](../src/hooks/queries/useWatchedItemsQuery.ts) | `['watched-items']` | ✅ Done | 1 |
|
||||
| useShoppingListsQuery | [src/hooks/queries/useShoppingListsQuery.ts](../src/hooks/queries/useShoppingListsQuery.ts) | `['shopping-lists']` | ✅ Done | 1 |
|
||||
| useUserAddressQuery | [src/hooks/queries/useUserAddressQuery.ts](../src/hooks/queries/useUserAddressQuery.ts) | `['user-address', addressId]` | ✅ Done | 7 |
|
||||
| useAuthProfileQuery | [src/hooks/queries/useAuthProfileQuery.ts](../src/hooks/queries/useAuthProfileQuery.ts) | `['auth-profile']` | ✅ Done | 7 |
|
||||
|
||||
### Mutation Hooks (7)
|
||||
### Mutation Hooks (8)
|
||||
|
||||
| Hook | File | Invalidates | Status | Phase |
|
||||
|------|------|-------------|--------|-------|
|
||||
| useAddWatchedItemMutation | [src/hooks/mutations/useAddWatchedItemMutation.ts](../src/hooks/mutations/useAddWatchedItemMutation.ts) | `['watched-items']` | ✅ Done | 3 |
|
||||
| useRemoveWatchedItemMutation | [src/hooks/mutations/useRemoveWatchedItemMutation.ts](../src/hooks/mutations/useRemoveWatchedItemMutation.ts) | `['watched-items']` | ✅ Done | 3 |
|
||||
| useCreateShoppingListMutation | [src/hooks/mutations/useCreateShoppingListMutation.ts](../src/hooks/mutations/useCreateShoppingListMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useDeleteShoppingListMutation | [src/hooks/mutations/useDeleteShoppingListMutation.ts](../src/hooks/mutations/useDeleteShoppingListMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useAddShoppingListItemMutation | [src/hooks/mutations/useAddShoppingListItemMutation.ts](../src/hooks/mutations/useAddShoppingListItemMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useUpdateShoppingListItemMutation | [src/hooks/mutations/useUpdateShoppingListItemMutation.ts](../src/hooks/mutations/useUpdateShoppingListItemMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useRemoveShoppingListItemMutation | [src/hooks/mutations/useRemoveShoppingListItemMutation.ts](../src/hooks/mutations/useRemoveShoppingListItemMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| Hook | File | Invalidates | Status | Phase |
|
||||
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------- | ------- | ----- |
|
||||
| useAddWatchedItemMutation | [src/hooks/mutations/useAddWatchedItemMutation.ts](../src/hooks/mutations/useAddWatchedItemMutation.ts) | `['watched-items']` | ✅ Done | 3 |
|
||||
| useRemoveWatchedItemMutation | [src/hooks/mutations/useRemoveWatchedItemMutation.ts](../src/hooks/mutations/useRemoveWatchedItemMutation.ts) | `['watched-items']` | ✅ Done | 3 |
|
||||
| useCreateShoppingListMutation | [src/hooks/mutations/useCreateShoppingListMutation.ts](../src/hooks/mutations/useCreateShoppingListMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useDeleteShoppingListMutation | [src/hooks/mutations/useDeleteShoppingListMutation.ts](../src/hooks/mutations/useDeleteShoppingListMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useAddShoppingListItemMutation | [src/hooks/mutations/useAddShoppingListItemMutation.ts](../src/hooks/mutations/useAddShoppingListItemMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useUpdateShoppingListItemMutation | [src/hooks/mutations/useUpdateShoppingListItemMutation.ts](../src/hooks/mutations/useUpdateShoppingListItemMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useRemoveShoppingListItemMutation | [src/hooks/mutations/useRemoveShoppingListItemMutation.ts](../src/hooks/mutations/useRemoveShoppingListItemMutation.ts) | `['shopping-lists']` | ✅ Done | 3 |
|
||||
| useGeocodeMutation | [src/hooks/mutations/useGeocodeMutation.ts](../src/hooks/mutations/useGeocodeMutation.ts) | N/A | ✅ Done | 7 |
|
||||
|
||||
### Providers Migrated (4)
|
||||
### Providers Migrated (5)
|
||||
|
||||
| Provider | Uses | Status |
|
||||
|----------|------|--------|
|
||||
| [AppProviders.tsx](../src/providers/AppProviders.tsx) | QueryClientProvider wrapper | ✅ Done |
|
||||
| [FlyersProvider.tsx](../src/providers/FlyersProvider.tsx) | useFlyersQuery | ✅ Done |
|
||||
| [MasterItemsProvider.tsx](../src/providers/MasterItemsProvider.tsx) | useMasterItemsQuery | ✅ Done |
|
||||
| [UserDataProvider.tsx](../src/providers/UserDataProvider.tsx) | useWatchedItemsQuery + useShoppingListsQuery | ✅ Done |
|
||||
| Provider | Uses | Status |
|
||||
| ------------------------------------------------------------------- | -------------------------------------------- | ------- |
|
||||
| [AppProviders.tsx](../src/providers/AppProviders.tsx) | QueryClientProvider wrapper | ✅ Done |
|
||||
| [FlyersProvider.tsx](../src/providers/FlyersProvider.tsx) | useFlyersQuery | ✅ Done |
|
||||
| [MasterItemsProvider.tsx](../src/providers/MasterItemsProvider.tsx) | useMasterItemsQuery | ✅ Done |
|
||||
| [UserDataProvider.tsx](../src/providers/UserDataProvider.tsx) | useWatchedItemsQuery + useShoppingListsQuery | ✅ Done |
|
||||
| [AuthProvider.tsx](../src/providers/AuthProvider.tsx) | useAuthProfileQuery | ✅ Done |
|
||||
|
||||
---
|
||||
|
||||
## ❌ NOT MIGRATED: Admin & Analytics Features
|
||||
## ✅ COMPLETED: Admin Features (Phase 5)
|
||||
|
||||
### High Priority - Admin Features
|
||||
### Admin Query Hooks (4)
|
||||
|
||||
| Feature | Component/Hook | Current Pattern | API Calls | Priority |
|
||||
|---------|----------------|-----------------|-----------|----------|
|
||||
| **Activity Log** | [ActivityLog.tsx](../src/components/ActivityLog.tsx) | useState + useEffect | `fetchActivityLog(20, 0)` | 🔴 HIGH |
|
||||
| **Admin Stats** | [AdminStatsPage.tsx](../src/pages/AdminStatsPage.tsx) | useState + useEffect | `getApplicationStats()` | 🔴 HIGH |
|
||||
| **Corrections** | [CorrectionsPage.tsx](../src/pages/CorrectionsPage.tsx) | useState + useEffect + Promise.all | `getSuggestedCorrections()`, `fetchMasterItems()`, `fetchCategories()` | 🔴 HIGH |
|
||||
| Hook | File | Query Key | Status | Phase |
|
||||
| ---------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------- | ----- |
|
||||
| useActivityLogQuery | [src/hooks/queries/useActivityLogQuery.ts](../src/hooks/queries/useActivityLogQuery.ts) | `['activity-log', { limit, offset }]` | ✅ Done | 5 |
|
||||
| useApplicationStatsQuery | [src/hooks/queries/useApplicationStatsQuery.ts](../src/hooks/queries/useApplicationStatsQuery.ts) | `['application-stats']` | ✅ Done | 5 |
|
||||
| useSuggestedCorrectionsQuery | [src/hooks/queries/useSuggestedCorrectionsQuery.ts](../src/hooks/queries/useSuggestedCorrectionsQuery.ts) | `['suggested-corrections']` | ✅ Done | 5 |
|
||||
| useCategoriesQuery | [src/hooks/queries/useCategoriesQuery.ts](../src/hooks/queries/useCategoriesQuery.ts) | `['categories']` | ✅ Done | 5 |
|
||||
|
||||
**Issues:**
|
||||
- Manual state management with useState/useEffect
|
||||
- No caching - data refetches on every mount
|
||||
- No automatic refetching or background updates
|
||||
- Manual loading/error state handling
|
||||
- Duplicate API calls (CorrectionsPage fetches master items separately)
|
||||
### Admin Components Migrated (3)
|
||||
|
||||
**Recommended Query Hooks to Create:**
|
||||
```typescript
|
||||
// src/hooks/queries/useActivityLogQuery.ts
|
||||
queryKey: ['activity-log', { limit, offset }]
|
||||
staleTime: 30 seconds (frequently updated)
|
||||
| Component | Uses | Status |
|
||||
| ------------------------------------------------------------- | --------------------------------------------------------------------- | ------- |
|
||||
| [ActivityLog.tsx](../src/pages/admin/ActivityLog.tsx) | useActivityLogQuery | ✅ Done |
|
||||
| [AdminStatsPage.tsx](../src/pages/admin/AdminStatsPage.tsx) | useApplicationStatsQuery | ✅ Done |
|
||||
| [CorrectionsPage.tsx](../src/pages/admin/CorrectionsPage.tsx) | useSuggestedCorrectionsQuery, useMasterItemsQuery, useCategoriesQuery | ✅ Done |
|
||||
|
||||
// src/hooks/queries/useApplicationStatsQuery.ts
|
||||
queryKey: ['application-stats']
|
||||
staleTime: 2 minutes (changes moderately)
|
||||
---
|
||||
|
||||
// src/hooks/queries/useSuggestedCorrectionsQuery.ts
|
||||
queryKey: ['suggested-corrections']
|
||||
staleTime: 1 minute
|
||||
## ✅ COMPLETED: Analytics Features (Phase 6)
|
||||
|
||||
// src/hooks/queries/useCategoriesQuery.ts
|
||||
queryKey: ['categories']
|
||||
staleTime: 10 minutes (rarely changes)
|
||||
```
|
||||
### Analytics Query Hooks (3)
|
||||
|
||||
### Medium Priority - Analytics Features
|
||||
| Hook | File | Query Key | Status | Phase |
|
||||
| --------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- | ----- |
|
||||
| useBestSalePricesQuery | [src/hooks/queries/useBestSalePricesQuery.ts](../src/hooks/queries/useBestSalePricesQuery.ts) | `['best-sale-prices']` | ✅ Done | 6 |
|
||||
| useFlyerItemsForFlyersQuery | [src/hooks/queries/useFlyerItemsForFlyersQuery.ts](../src/hooks/queries/useFlyerItemsForFlyersQuery.ts) | `['flyer-items-batch', flyerIds]` | ✅ Done | 6 |
|
||||
| useFlyerItemCountQuery | [src/hooks/queries/useFlyerItemCountQuery.ts](../src/hooks/queries/useFlyerItemCountQuery.ts) | `['flyer-item-count', flyerIds]` | ✅ Done | 6 |
|
||||
|
||||
| Feature | Component/Hook | Current Pattern | API Calls | Priority |
|
||||
|---------|----------------|-----------------|-----------|----------|
|
||||
| **My Deals** | [MyDealsPage.tsx](../src/pages/MyDealsPage.tsx) | useState + useEffect | `fetchBestSalePrices()` | 🟡 MEDIUM |
|
||||
| **Active Deals** | [useActiveDeals.tsx](../src/hooks/useActiveDeals.tsx) | useApi hook | `countFlyerItemsForFlyers()`, `fetchFlyerItemsForFlyers()` | 🟡 MEDIUM |
|
||||
### Analytics Components/Hooks Migrated (2)
|
||||
|
||||
**Issues:**
|
||||
- useActiveDeals uses old `useApi` hook pattern
|
||||
- MyDealsPage has manual state management
|
||||
- No caching for best sale prices
|
||||
- No relationship to watched-items cache (could be optimized)
|
||||
| Component/Hook | Uses | Status |
|
||||
| ----------------------------------------------------- | --------------------------------------------------- | ------- |
|
||||
| [MyDealsPage.tsx](../src/pages/MyDealsPage.tsx) | useBestSalePricesQuery | ✅ Done |
|
||||
| [useActiveDeals.tsx](../src/hooks/useActiveDeals.tsx) | useFlyerItemsForFlyersQuery, useFlyerItemCountQuery | ✅ Done |
|
||||
|
||||
**Recommended Query Hooks to Create:**
|
||||
```typescript
|
||||
// src/hooks/queries/useBestSalePricesQuery.ts
|
||||
queryKey: ['best-sale-prices', watchedItemIds]
|
||||
staleTime: 2 minutes
|
||||
// Should invalidate when flyers or flyer-items update
|
||||
**Benefits Achieved:**
|
||||
|
||||
// Refactor useActiveDeals to use TanStack Query
|
||||
// Could share cache with flyer-items query
|
||||
```
|
||||
- ✅ Removed useApi dependency from analytics features
|
||||
- ✅ Automatic caching of deal data (2-5 minute stale times)
|
||||
- ✅ Consistent error handling via TanStack Query
|
||||
- ✅ Batch fetching for flyer items (single query for multiple flyers)
|
||||
|
||||
### Low Priority - Voice Lab
|
||||
|
||||
| Feature | Component | Current Pattern | Priority |
|
||||
|---------|-----------|-----------------|----------|
|
||||
| **Voice Lab** | [VoiceLabPage.tsx](../src/pages/VoiceLabPage.tsx) | Direct async/await | 🟢 LOW |
|
||||
| Feature | Component | Current Pattern | Priority |
|
||||
| ------------- | ------------------------------------------------- | ------------------ | -------- |
|
||||
| **Voice Lab** | [VoiceLabPage.tsx](../src/pages/VoiceLabPage.tsx) | Direct async/await | 🟢 LOW |
|
||||
|
||||
**Notes:**
|
||||
|
||||
- Event-driven API calls (not data fetching)
|
||||
- Speech generation and voice sessions
|
||||
- Mutation-like operations, not query-like
|
||||
@@ -125,107 +118,113 @@ staleTime: 2 minutes
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ LEGACY HOOKS STILL IN USE
|
||||
## ✅ COMPLETED: Legacy Hook Cleanup (Phase 7)
|
||||
|
||||
### Hooks to Deprecate/Remove
|
||||
### Hooks Removed
|
||||
|
||||
| Hook | File | Used By | Status |
|
||||
|------|------|---------|--------|
|
||||
| **useApi** | [src/hooks/useApi.ts](../src/hooks/useApi.ts) | useActiveDeals, useWatchedItems, useShoppingLists | ⚠️ Active |
|
||||
| **useApiOnMount** | [src/hooks/useApiOnMount.ts](../src/hooks/useApiOnMount.ts) | None (deprecated) | ⚠️ Remove |
|
||||
| **useInfiniteQuery** | [src/hooks/useInfiniteQuery.ts](../src/hooks/useInfiniteQuery.ts) | None (deprecated) | ⚠️ Remove |
|
||||
| Hook | Former File | Replaced By | Status |
|
||||
| ----------------- | ------------------------------ | -------------------- | ---------- |
|
||||
| **useApi** | ~~src/hooks/useApi.ts~~ | TanStack Query hooks | ✅ Removed |
|
||||
| **useApiOnMount** | ~~src/hooks/useApiOnMount.ts~~ | TanStack Query hooks | ✅ Removed |
|
||||
|
||||
**Plan:**
|
||||
- Phase 4: Refactor useWatchedItems/useShoppingLists to use TanStack Query mutations
|
||||
- Phase 5: Refactor useActiveDeals to use TanStack Query
|
||||
- Phase 6: Remove useApi, useApiOnMount, custom useInfiniteQuery
|
||||
### Additional Hooks Created (Phase 7)
|
||||
|
||||
| Hook | File | Purpose |
|
||||
| ------------------- | ----------------------------------------------------------------------------------------- | -------------------------------- |
|
||||
| useUserAddressQuery | [src/hooks/queries/useUserAddressQuery.ts](../src/hooks/queries/useUserAddressQuery.ts) | Fetch user address by ID |
|
||||
| useAuthProfileQuery | [src/hooks/queries/useAuthProfileQuery.ts](../src/hooks/queries/useAuthProfileQuery.ts) | Fetch authenticated user profile |
|
||||
| useGeocodeMutation | [src/hooks/mutations/useGeocodeMutation.ts](../src/hooks/mutations/useGeocodeMutation.ts) | Geocode address strings |
|
||||
|
||||
### Files Modified (Phase 7)
|
||||
|
||||
| File | Change |
|
||||
| --------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| [useProfileAddress.ts](../src/hooks/useProfileAddress.ts) | Refactored to use useUserAddressQuery + useGeocodeMutation |
|
||||
| [AuthProvider.tsx](../src/providers/AuthProvider.tsx) | Refactored to use useAuthProfileQuery |
|
||||
|
||||
---
|
||||
|
||||
## 📊 MIGRATION PHASES
|
||||
|
||||
### ✅ Phase 1: Core Queries (Complete)
|
||||
|
||||
- Infrastructure setup (QueryClientProvider)
|
||||
- Flyers, Watched Items, Shopping Lists queries
|
||||
- Providers refactored
|
||||
|
||||
### ✅ Phase 2: Additional Queries (Complete)
|
||||
|
||||
- Master Items query
|
||||
- Flyer Items query
|
||||
- Per-resource caching strategies
|
||||
|
||||
### ✅ Phase 3: Mutations (Complete)
|
||||
|
||||
- All watched items mutations
|
||||
- All shopping list mutations
|
||||
- Automatic cache invalidation
|
||||
|
||||
### 🔄 Phase 4: Hook Refactoring (Planned)
|
||||
- [ ] Refactor useWatchedItems to use mutation hooks
|
||||
- [ ] Refactor useShoppingLists to use mutation hooks
|
||||
- [ ] Remove deprecated setters from context
|
||||
### ✅ Phase 4: Hook Refactoring (Complete)
|
||||
|
||||
### ⏳ Phase 5: Admin Features (Not Started)
|
||||
- [ ] Create useActivityLogQuery
|
||||
- [ ] Create useApplicationStatsQuery
|
||||
- [ ] Create useSuggestedCorrectionsQuery
|
||||
- [ ] Create useCategoriesQuery
|
||||
- [ ] Migrate ActivityLog.tsx
|
||||
- [ ] Migrate AdminStatsPage.tsx
|
||||
- [ ] Migrate CorrectionsPage.tsx
|
||||
- [x] Refactor useWatchedItems to use mutation hooks
|
||||
- [x] Refactor useShoppingLists to use mutation hooks
|
||||
- [x] Remove deprecated setters from context
|
||||
|
||||
### ⏳ Phase 6: Analytics Features (Not Started)
|
||||
- [ ] Create useBestSalePricesQuery
|
||||
- [ ] Migrate MyDealsPage.tsx
|
||||
- [ ] Refactor useActiveDeals to use TanStack Query
|
||||
### ✅ Phase 5: Admin Features (Complete)
|
||||
|
||||
### ⏳ Phase 7: Cleanup (Not Started)
|
||||
- [ ] Remove useApi hook
|
||||
- [ ] Remove useApiOnMount hook
|
||||
- [ ] Remove custom useInfiniteQuery hook
|
||||
- [ ] Remove all stub implementations
|
||||
- [ ] Update all tests
|
||||
- [x] Create useActivityLogQuery
|
||||
- [x] Create useApplicationStatsQuery
|
||||
- [x] Create useSuggestedCorrectionsQuery
|
||||
- [x] Create useCategoriesQuery
|
||||
- [x] Migrate ActivityLog.tsx
|
||||
- [x] Migrate AdminStatsPage.tsx
|
||||
- [x] Migrate CorrectionsPage.tsx
|
||||
|
||||
### ✅ Phase 6: Analytics Features (Complete - 2026-01-10)
|
||||
|
||||
- [x] Create useBestSalePricesQuery
|
||||
- [x] Create useFlyerItemsForFlyersQuery
|
||||
- [x] Create useFlyerItemCountQuery
|
||||
- [x] Migrate MyDealsPage.tsx
|
||||
- [x] Refactor useActiveDeals to use TanStack Query
|
||||
|
||||
### ✅ Phase 7: Cleanup (Complete - 2026-01-10)
|
||||
|
||||
- [x] Create useUserAddressQuery
|
||||
- [x] Create useAuthProfileQuery
|
||||
- [x] Create useGeocodeMutation
|
||||
- [x] Migrate useProfileAddress from useApi to TanStack Query
|
||||
- [x] Migrate AuthProvider from useApi to TanStack Query
|
||||
- [x] Remove useApi hook
|
||||
- [x] Remove useApiOnMount hook
|
||||
|
||||
### ✅ Phase 8: Additional Component Migration (Complete - 2026-01-10)
|
||||
|
||||
- [x] Create useUserProfileDataQuery (combined profile + achievements)
|
||||
- [x] Create useLeaderboardQuery (public leaderboard data)
|
||||
- [x] Create usePriceHistoryQuery (historical price data for watched items)
|
||||
- [x] Refactor useUserProfileData to use TanStack Query
|
||||
- [x] Refactor Leaderboard.tsx to use useLeaderboardQuery
|
||||
- [x] Refactor PriceHistoryChart.tsx to use usePriceHistoryQuery
|
||||
|
||||
---
|
||||
|
||||
## 🎯 RECOMMENDED NEXT STEPS
|
||||
## 🎉 MIGRATION COMPLETE
|
||||
|
||||
### Option A: Complete User Features First (Phase 4)
|
||||
Focus on finishing the user-facing feature migration by refactoring the remaining custom hooks. This provides a complete, polished user experience.
|
||||
The TanStack Query migration is **100% complete**. All data fetching in the application now uses TanStack Query for:
|
||||
|
||||
**Pros:**
|
||||
- Completes the user-facing story
|
||||
- Simplifies codebase for user features
|
||||
- Sets pattern for admin features
|
||||
|
||||
**Cons:**
|
||||
- Admin features still use old patterns
|
||||
|
||||
### Option B: Migrate Admin Features (Phase 5)
|
||||
Create query hooks for admin features to improve admin user experience and establish complete ADR-0005 coverage.
|
||||
|
||||
**Pros:**
|
||||
- Faster admin pages with caching
|
||||
- Consistent patterns across entire app
|
||||
- Better for admin users
|
||||
|
||||
**Cons:**
|
||||
- User-facing hooks still partially old pattern
|
||||
|
||||
### Option C: Parallel Migration (Phase 4 + 5)
|
||||
Work on both user hook refactoring and admin feature migration simultaneously.
|
||||
|
||||
**Pros:**
|
||||
- Fastest path to complete migration
|
||||
- Comprehensive coverage quickly
|
||||
|
||||
**Cons:**
|
||||
- Larger scope, more testing needed
|
||||
- **Automatic caching** - Server data is cached and shared across components
|
||||
- **Background refetching** - Stale data is automatically refreshed
|
||||
- **Loading/error states** - Consistent handling across the entire application
|
||||
- **Cache invalidation** - Mutations automatically invalidate related queries
|
||||
- **DevTools** - React Query DevTools available in development mode
|
||||
|
||||
---
|
||||
|
||||
## 📝 NOTES
|
||||
|
||||
### Query Key Organization
|
||||
|
||||
Currently using literal strings for query keys. Consider creating a centralized query keys file:
|
||||
|
||||
```typescript
|
||||
@@ -246,24 +245,29 @@ export const queryKeys = {
|
||||
```
|
||||
|
||||
### Cache Invalidation Strategy
|
||||
|
||||
Admin features may need different invalidation strategies:
|
||||
|
||||
- Activity log should refetch after mutations
|
||||
- Stats should refetch after significant operations
|
||||
- Corrections should refetch after approving/rejecting
|
||||
|
||||
### Stale Time Recommendations
|
||||
|
||||
| Data Type | Stale Time | Reasoning |
|
||||
|-----------|------------|-----------|
|
||||
| Master Items | 10 minutes | Rarely changes |
|
||||
| Categories | 10 minutes | Rarely changes |
|
||||
| Flyers | 2 minutes | Moderate changes |
|
||||
| Flyer Items | 5 minutes | Static once created |
|
||||
| User Lists | 1 minute | Frequent changes |
|
||||
| Admin Stats | 2 minutes | Moderate changes |
|
||||
| Activity Log | 30 seconds | Frequently updated |
|
||||
| Corrections | 1 minute | Moderate changes |
|
||||
| Best Prices | 2 minutes | Recalculated periodically |
|
||||
| Data Type | Stale Time | Reasoning |
|
||||
| ----------------- | ---------- | ----------------------------------- |
|
||||
| Master Items | 10 minutes | Rarely changes |
|
||||
| Categories | 10 minutes | Rarely changes |
|
||||
| Flyers | 2 minutes | Moderate changes |
|
||||
| Flyer Items | 5 minutes | Static once created |
|
||||
| User Lists | 1 minute | Frequent changes |
|
||||
| Admin Stats | 2 minutes | Moderate changes |
|
||||
| Activity Log | 30 seconds | Frequently updated |
|
||||
| Corrections | 1 minute | Moderate changes |
|
||||
| Best Prices | 2 minutes | Recalculated periodically |
|
||||
| User Profile Data | 5 minutes | User-specific, changes infrequently |
|
||||
| Leaderboard | 2 minutes | Public data, moderate updates |
|
||||
| Price History | 10 minutes | Historical data, rarely changes |
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user