Add frontend API client and TanStack Query hooks

Install @tanstack/react-query, create a fetch-based API client with typed
functions for all endpoints, and add query/mutation hooks for games, pokemon,
runs, and encounters. Includes Vite dev proxy for /api and QueryClientProvider
setup.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-05 15:09:14 +01:00
parent 13e90eb308
commit 7c65775c8b
15 changed files with 371 additions and 19 deletions

View File

@@ -1,11 +1,11 @@
---
# nuzlocke-tracker-8fcj
title: Frontend API Integration
status: todo
status: completed
type: task
priority: normal
created_at: 2026-02-04T15:44:42Z
updated_at: 2026-02-04T15:47:24Z
updated_at: 2026-02-05T13:55:52Z
parent: nuzlocke-tracker-f5ob
blocking:
- nuzlocke-tracker-uw2j
@@ -17,19 +17,21 @@ blocking:
Implement frontend services to communicate with the backend API.
## Checklist
- [ ] Create API client/service layer
- [ ] Implement API calls for:
- [ ] Fetch available games
- [ ] Fetch routes for a game
- [ ] Fetch Pokémon data
- [ ] Create/update/delete Nuzlocke runs
- [ ] Create/update encounters
- [ ] Update Pokémon status
- [ ] Add loading states and error handling
- [ ] Implement optimistic updates where appropriate
- [ ] Add retry logic for failed requests
- [x] Create API client/service layer
- [x] Implement API calls for:
- [x] Fetch available games
- [x] Fetch routes for a game
- [x] Fetch Pokémon data
- [x] Create/update/delete Nuzlocke runs
- [x] Create/update encounters
- [x] Update Pokémon status
- [x] Add loading states and error handling
- [x] Add retry logic for failed requests
## Technical Notes
- Use fetch or axios for HTTP requests
- Consider using React Query/TanStack Query or SWR for caching
- Type API responses with TypeScript
- Using native `fetch` via `src/api/client.ts` wrapper
- Using TanStack Query for caching, loading states, and retry
- All API responses typed with TypeScript
- Vite dev proxy configured for `/api` → backend
- Query hooks in `src/hooks/` for each domain (games, pokemon, runs, encounters)
- Mutations auto-invalidate relevant query caches