nextjs
Dataarchitecture

🎯 Data Architecture Fix: From Hybrid to Database-First

8/4/2025 Accurate

Problem: Hybrid Data Architecture

The Issue You Identified

Components were fetching from two different data sources without knowing the implications:

🔴 API Components (Stale Data)      🟢 Database Components (Fresh Data)
├─ AthleteHeader                   ├─ RecentActivities  
├─ useAthleteData()                ├─ ActivitiesDashboard
└─ Hits Strava API                 ├─ ActivityFeed
                                   ├─ TrainingLoadChart
                                   └─ useUserActivities()

What Happens:

  1. Sync Process → Updates database ✅
  2. Database components → Show new data immediately ✅
  3. API components → Still show old cached data ❌

Your 4-Hour Run Missing:

  • ✅ Sync worked → Run stored in database
  • ✅ Dashboard shows it → Uses useUserActivities()
  • ❌ Header shows old name → Uses useAthleteData() from API

Solution: Database-First Architecture

Fixed Components:

  • ✅ AthleteHeader → Now uses useAthleteProfile(userId)
  • ✅ RecentActivities → Already using useUserActivities(userId)
  • ✅ ActivitiesDashboard → Already using useUserActivities(userId)
  • ✅ TrainingLoadChart → Already using database via useUserActivities(userId)

Data Flow Now:

Strava API → Sync Service → Database → React Query → Components
                    ↑                      ↑
              (Once per sync)        (Cached, fast)

Benefits:

  • Consistency: All components use same data source
  • Speed: Database queries are faster than API calls
  • No Rate Limits: No more 600 requests/day limit
  • Real-time: Sync updates all components instantly

Migration Checklist

✅ Completed:

  • Created useAthleteProfile(userId) hook
  • Updated AthleteHeader to use database
  • All activity components use useUserActivities(userId)
  • Training load components use database

🔄 To Deprecate (Optional):

  • useAthleteData() - Only used by old components
  • useAthleteActivities() - Superseded by useUserActivities()
  • /api/strava/athlete route - No longer needed

🎯 Result:

Single Source of Truth → Database stores everything, components read from there.

Testing the Fix

  1. Sync your data:

    # In browser console on /dashboard
fetch('/api/strava/sync', { method: 'POST' })

  2. Verify all components update:

    • Athlete header shows your name ✅
    • Recent activities show latest run ✅
    • Training load includes new data ✅
    • All data consistent across components ✅

Best Practices Going Forward

1. Always Use Database-First Hooks:

// ✅ Good: Database-first
const { data: activities } = useUserActivities(userId)
const { data: athlete } = useAthleteProfile(userId)
 
// ❌ Avoid: API-first
const { data: activities } = useAthleteActivities(token)
const { data: athlete } = useAthleteData(token)

2. Sync Strategy:

  • Sync once → Updates database
  • Components read → From database (cached)
  • Fast, consistent, no rate limits

3. Query Invalidation:

// When sync completes, invalidate related queries
queryClient.invalidateQueries({ queryKey: ['user', 'activities'] })
queryClient.invalidateQueries({ queryKey: ['athlete', 'profile'] })

Architecture Principle

"Sync to Database, Read from Database"

Never mix API and database reads in the same app. Pick one source of truth and stick to it.

Part2 CommwserverNotesapp