# Track Queries React Query Audit

**Date**: 2025-01-27  
**Action**: 4.1.2.1 - Verify React Query handles all track queries  
**Status**: ✅ Complete

## Summary

This audit verifies whether all track queries are using React Query or if some are still using direct API calls or Zustand stores.

## Findings

### ✅ **Using React Query**

1. **Comments** (`apps/web/src/features/tracks/components/CommentSection.tsx`)
   - Uses `useQuery` for fetching comments: `['trackComments', trackId, page]`
   - Uses `useMutation` for creating comments
   - ✅ Properly implemented

2. **Likes** (`apps/web/src/features/tracks/components/LikeButton.tsx`)
   - Uses `useQuery` for fetching likes: `['trackLikes', trackId]`
   - Uses `useMutation` for like/unlike operations
   - ✅ Properly implemented with optimistic updates

### ❌ **NOT Using React Query**

1. **Track List Queries**
   - **File**: `apps/web/src/features/tracks/hooks/useTrackList.ts`
   - **Pattern**: Uses `useState` + `useEffect` + direct API calls
   - **Service**: `getTracks()` from `trackListService.ts`
   - **Status**: ❌ Not using React Query
   - **Impact**: No caching, no automatic refetching, manual loading state management

2. **Track Search**
   - **File**: `apps/web/src/features/tracks/components/TrackSearch.tsx`
   - **Pattern**: Uses `useState` + `useEffect` + direct API calls
   - **Service**: `searchTracks()` from `trackSearchService.ts`
   - **Status**: ❌ Not using React Query
   - **Impact**: No caching, no automatic refetching, manual loading state management

3. **Track Detail**
   - **File**: `apps/web/src/features/tracks/pages/TrackDetailPage.tsx`
   - **Pattern**: Likely uses direct API calls (needs verification)
   - **Service**: `getTrackById()` from `trackService.ts` or `trackApi.ts`
   - **Status**: ❌ Not using React Query (needs verification)
   - **Impact**: No caching, no automatic refetching

4. **Track API Functions**
   - **Files**:
     - `apps/web/src/features/tracks/api/trackApi.ts`
     - `apps/web/src/features/tracks/services/trackService.ts`
     - `apps/web/src/features/tracks/services/trackListService.ts`
     - `apps/web/src/features/tracks/services/trackSearchService.ts`
   - **Pattern**: Direct API client calls, not wrapped in React Query hooks
   - **Status**: ❌ Not using React Query

## Services Audit

### Track List Service (`trackListService.ts`)

- `getTracks()` - Returns `PaginatedResponse<Track>`
- `getTrackById()` - Returns `Track`
- ❌ Not using React Query hooks

### Track Search Service (`trackSearchService.ts`)

- `searchTracks()` - Returns search results
- ❌ Not using React Query hooks

### Track API (`trackApi.ts`)

- `getTracks()` - Direct API call
- `getTrackById()` - Direct API call
- Various other track operations
- ❌ Not using React Query hooks

## Conclusion

**React Query is NOT handling all track queries.**

Only comments and likes are using React Query. The main track queries (list, search, detail) are still using:

- Direct API calls with `useState`/`useEffect`
- Custom hooks (`useTrackList`) that manage state manually
- No caching
- No automatic refetching
- Manual loading/error state management

## Recommendations

1. **Create React Query hooks for tracks**:
   - `useTracks()` - For track list queries
   - `useTrack(id)` - For single track queries
   - `useTrackSearch(params)` - For track search queries

2. **Migrate components**:
   - Replace `useTrackList` hook with `useTracks()` React Query hook
   - Replace `TrackSearch` component's direct API calls with `useTrackSearch()`
   - Replace `TrackDetailPage` direct API calls with `useTrack(id)`

3. **Remove manual state management**:
   - Remove `useState` for loading/error states (React Query handles this)
   - Remove manual refetching logic (React Query handles this)
   - Remove manual caching logic (React Query handles this)

## Next Steps

- [ ] Create `useTracks()` React Query hook
- [ ] Create `useTrack(id)` React Query hook
- [ ] Create `useTrackSearch(params)` React Query hook
- [ ] Migrate `useTrackList` to use React Query
- [ ] Migrate `TrackSearch` component to use React Query
- [ ] Migrate `TrackDetailPage` to use React Query
- [ ] Remove obsolete manual state management code

## Related Actions

- **Action 4.1.2.2**: Audit library store for all domain data
- **Action 4.1.2.3**: Determine which fields are UI state vs domain data
- **Action 4.1.2.4**: Remove domain data from library store
