TanStack Query · API-Grenze
TanStack Query snake_case ↔ camelCase
Der TanStack-Query-Cache sollte die Form speichern, die die App tatsächlich nutzt. Normalisiere in queryFn und mutationFn.
camelCase-Daten aus der Query-Funktion zurückgeben
import { useQuery } from "@tanstack/react-query"
import { apiJson } from "./api"
type UserProfile = {
userId: number
firstName: string
}
export function useUserProfile(userId: number) {
return useQuery({
queryKey: ["user-profile", userId],
queryFn: () => apiJson<UserProfile>(`/users/${userId}`),
})
}Wenn queryFn normalisierte Daten liefert, sehen alle Komponenten unter demselben Query-Key dieselbe Form.
Mutation-Variablen an der Request-Grenze konvertieren
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { apiJson } from "./api"
type UpdateUser = {
firstName: string
}
export function useUpdateUser(userId: number) {
const queryClient = useQueryClient()
return useMutation({
mutationFn: (input: UpdateUser) =>
apiJson(`/users/${userId}`, {
method: "PATCH",
body: input,
}),
onSuccess: (data) => {
queryClient.setQueryData(["user-profile", userId], data)
},
})
}App-Eingaben bleiben camelCase und werden erst in der Request-Funktion in den snake_case-Vertrag des Servers übersetzt.
Hinweise für Produktion
- TanStack Query v5 verwendet für useQuery und useMutation die einzelne Options-Objekt-Form.
- Eine kanonische Form cachen und raw snake_case nicht mit camelCase unter demselben Query-Key mischen.
- Mutation-Responses vor dem Schreiben in den Cache normalisieren.
- Case-Konvertierung ist Transportlogik; Komponenten konsumieren bereits normalisierte Daten.
JSON-Grenze online testen
Teste verschachtelte Objekte, Arrays, Ausschlüsse, Stop Paths, Präfixe, Kollisionen und Key-Diff vor der Implementierung.
.json-Datei hier ablegen oder vom Gerät auswählen
Dateien werden nur im Browser gelesen. Maximale Größe: 5 MB.
Konvertiertes JSON
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}Parsing, Dateilesen, Formatierung und Schlüsselkonvertierung laufen lokal im Browser. JSON wird nicht an einen Conversion-Server gesendet.