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:
43
frontend/src/hooks/useEncounters.ts
Normal file
43
frontend/src/hooks/useEncounters.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
createEncounter,
|
||||
updateEncounter,
|
||||
deleteEncounter,
|
||||
} from '../api/encounters'
|
||||
import type { CreateEncounterInput, UpdateEncounterInput } from '../types/game'
|
||||
|
||||
export function useCreateEncounter(runId: number) {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (data: CreateEncounterInput) => createEncounter(runId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['runs', runId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateEncounter(runId: number) {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
data,
|
||||
}: {
|
||||
id: number
|
||||
data: UpdateEncounterInput
|
||||
}) => updateEncounter(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['runs', runId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useDeleteEncounter(runId: number) {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (id: number) => deleteEncounter(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['runs', runId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user