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:
31
frontend/src/hooks/useGames.ts
Normal file
31
frontend/src/hooks/useGames.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { getGames, getGame, getGameRoutes, getRoutePokemon } from '../api/games'
|
||||
|
||||
export function useGames() {
|
||||
return useQuery({
|
||||
queryKey: ['games'],
|
||||
queryFn: getGames,
|
||||
})
|
||||
}
|
||||
|
||||
export function useGame(id: number) {
|
||||
return useQuery({
|
||||
queryKey: ['games', id],
|
||||
queryFn: () => getGame(id),
|
||||
})
|
||||
}
|
||||
|
||||
export function useGameRoutes(gameId: number) {
|
||||
return useQuery({
|
||||
queryKey: ['games', gameId, 'routes'],
|
||||
queryFn: () => getGameRoutes(gameId),
|
||||
})
|
||||
}
|
||||
|
||||
export function useRoutePokemon(routeId: number | null) {
|
||||
return useQuery({
|
||||
queryKey: ['routes', routeId, 'pokemon'],
|
||||
queryFn: () => getRoutePokemon(routeId!),
|
||||
enabled: routeId !== null,
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user