TanStack Query · fronteira da API

TanStack Query snake_case ↔ camelCase

O cache do TanStack Query deve manter o formato usado pela aplicação. Normalize em queryFn e mutationFn.

Por Equipe editorial do Camel Case ConverterPublicado em 12 de set. de 2026Última revisão

Retorne dados camelCase da 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}`),
  })
}

Quando queryFn retorna dados normalizados, todos os componentes com a mesma query key veem o mesmo formato.

Converta variáveis da mutation na fronteira 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)
    },
  })
}

Mantenha entradas camelCase na aplicação e converta para o contrato snake_case dentro da função de requisição.

Considerações de produção

  • TanStack Query v5 usa a forma de objeto de opções único para useQuery e useMutation.
  • Armazene um único formato canônico e não misture snake_case bruto com camelCase na mesma query key.
  • Normalize a resposta da mutation antes de gravar no cache.
  • Conversão de case é uma preocupação de transporte; componentes consomem dados já normalizados.

Testar a fronteira JSON online

Teste objetos aninhados, arrays, exclusões, stop paths, prefixos, colisões e diff de chaves antes de implementar.

Solte um arquivo .json ou escolha no dispositivo

Arquivos são lidos apenas no navegador. Tamanho máximo: 5 MB.

JSON convertido
{
  "userProfile": {
    "firstName": "Ada",
    "createdAt": "2026-09-12"
  }
}

Parsing, leitura de arquivo, formatação e conversão rodam localmente no navegador. O JSON não é enviado a um servidor de conversão.