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:
47
frontend/src/hooks/useRuns.ts
Normal file
47
frontend/src/hooks/useRuns.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { getRuns, getRun, createRun, updateRun, deleteRun } from '../api/runs'
|
||||
import type { CreateRunInput, UpdateRunInput } from '../types/game'
|
||||
|
||||
export function useRuns() {
|
||||
return useQuery({
|
||||
queryKey: ['runs'],
|
||||
queryFn: getRuns,
|
||||
})
|
||||
}
|
||||
|
||||
export function useRun(id: number) {
|
||||
return useQuery({
|
||||
queryKey: ['runs', id],
|
||||
queryFn: () => getRun(id),
|
||||
})
|
||||
}
|
||||
|
||||
export function useCreateRun() {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (data: CreateRunInput) => createRun(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['runs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateRun(id: number) {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (data: UpdateRunInput) => updateRun(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['runs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useDeleteRun() {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (id: number) => deleteRun(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['runs'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user