TanStack Query · frontière API
TanStack Query snake_case ↔ camelCase
Le cache TanStack Query doit conserver la forme réellement utilisée par l’application. Normalisez les réponses dans queryFn et les requêtes dans mutationFn.
Retourner des données camelCase depuis la query function
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}`),
})
}Si queryFn retourne des données normalisées, tous les composants qui lisent la même query key voient la même forme.
Convertir les variables de mutation à la frontière request
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)
},
})
}Gardez les entrées applicatives en camelCase puis mappez-les vers le contrat snake_case dans la fonction de requête.
Points d’attention en production
- TanStack Query v5 utilise la forme à objet d’options unique pour useQuery et useMutation.
- Conservez une seule forme canonique dans le cache et ne mélangez pas snake_case brut et camelCase.
- Normalisez une réponse de mutation avant de l’écrire dans le cache.
- La conversion de casse est une préoccupation de transport ; les composants consomment des données déjà normalisées.
Tester la frontière JSON en ligne
Testez objets imbriqués, tableaux, exclusions, stop paths, préfixes, collisions et diff de clés avant l’implémentation.
Déposez un fichier .json ou choisissez-en un sur votre appareil
Les fichiers sont lus uniquement dans votre navigateur. Taille maximale : 5 Mo.
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}Analyse, lecture de fichier, formatage et conversion s’exécutent localement dans votre navigateur. Le JSON n’est pas envoyé à un serveur de conversion.