[P2] Add React Query (TanStack Query) for server state management #99

New issue

Open

opened 2026-07-07 16:21:59 +12:00 by fastie81 · 0 comments

fastie81 commented

2026-07-07 16:21:59 +12:00

Owner

Problem

Frontend uses Axios + React Context only - no caching, deduplication, or background refetching.

Expected Behavior

Install @tanstack/react-query
Wrap app with QueryClientProvider
Replace manual useEffect + axios calls with useQuery/useMutation
Add stale-while-revalidate caching
Automatic refetch on window focus

Benefits

Eliminate duplicate requests
Background updates
Optimistic updates for mutations
Devtools for debugging

frontend/src/api/ (axios client)
frontend/src/contexts/ (AuthContext, ClubContext)
frontend/src/pages/ (all data-fetching components)
frontend/package.json

### Problem Frontend uses Axios + React Context only - no caching, deduplication, or background refetching. ### Expected Behavior - Install `@tanstack/react-query` - Wrap app with `QueryClientProvider` - Replace manual `useEffect` + axios calls with `useQuery`/`useMutation` - Add stale-while-revalidate caching - Automatic refetch on window focus ### Benefits - Eliminate duplicate requests - Background updates - Optimistic updates for mutations - Devtools for debugging ### Related Files - `frontend/src/api/` (axios client) - `frontend/src/contexts/` (AuthContext, ClubContext) - `frontend/src/pages/` (all data-fetching components) - `frontend/package.json`

fastie81 added the

labels

2026-07-07 16:21:59 +12:00