Formatador GraphQL Gratuito | Formatação Baseada no Prettier para Consultas e Esquemas

Loading…

Sobre Formatador GraphQL Online

Mantenha seu SDL e operações GraphQL legíveis e consistentes. Este formatador GraphQL online usa o analisador GraphQL do Prettier para reindentar, quebrar linhas e normalizar seus documentos. Ele executa no navegador quando possível e recorre a um formatador de servidor quando necessário, para que você obtenha saída confiável sem se preocupar com as ferramentas.

O Que Este Formatador GraphQL Faz

Usa o analisador GraphQL do Prettier para aplicar formatação consistente e padrão da comunidade
Suporta consultas, mutações, assinaturas, fragmentos e SDL de esquema completo (tipos, interfaces, uniões, enums, entradas, diretivas)
Indentação ajustável: escolha espaços ou tabs e configure o tamanho da indentação (1–8)
Controle opcional de comprimento de linha / quebra através de uma largura de coluna configurável
Mantém descrições (`"""…"""`) e comentários inline intactos enquanto normaliza seu layout
Valida a estrutura do seu documento GraphQL como parte da formatação; sintaxe inválida mostrará erros em vez de corromper o código silenciosamente
Execução híbrida: executa o Prettier no navegador quando disponível e recorre a um formatador de servidor se necessário
Cole ou carregue arquivos `.graphql` / `.gql`, depois visualize, copie ou baixe o resultado formatado

📝 Como Formatador GraphQL Online for graphql-formatter

Cole ou Carregue Seu GraphQL

Cole seu esquema ou consultas GraphQL no editor, ou solte um arquivo `.graphql` / `.gql`. O formatador funciona tanto para documentos SDL quanto de operações.

Ajuste as Opções de Formatação

Escolha espaços ou tabulações, defina o tamanho do recuo e configure o comprimento de linha preferido. Essas opções são passadas para o formatador GraphQL do Prettier.

Formate, Revise e Exporte

Clique em Formatar para aplicar as alterações. Revise o resultado no painel de visualização, depois copie de volta para seu editor ou baixe o arquivo formatado.

Especificações Técnicas

Entrada Suportada

Projetado para documentos padrão de esquema e operações GraphQL.

Tipo	Exemplos	Notas
SDL de Esquema	schema.graphql, schema.gql	Tipos, interfaces, uniões, enums, entradas, diretivas, definição de esquema
Operações	queries.graphql, app.gql	Consultas, mutações, assinaturas e fragmentos
Extensões	extensões de esquema em arquivos separados	ex., blocos `extend type Query { … }`

Motor de Formatação

A formatação é realizada usando o suporte GraphQL do Prettier. Na maioria dos casos, o Prettier é executado no navegador por meio de um runtime leve. Se o plugin GraphQL não puder ser resolvido no ambiente atual, o formatador alterna transparentemente para um worker Prettier do lado do servidor.

Opções Disponíveis (Mapeadas para o Prettier)

Opção	Comportamento	Valores Típicos
Estilo de Recuo	Escolha entre espaços e tabulações	espaço (padrão) ou tabulação
Tamanho do Recuo	Número de espaços por nível de recuo (ao usar espaços)	1–8, padrão: 2
Comprimento da Linha	Coluna alvo para quebrar/ajustar seleções longas	0–120 (0 ≈ efetivamente sem quebra)

Limites e Desempenho

A ferramenta é ajustada para esquemas e arquivos de operação GraphQL típicos. Solicitações em torno de algumas centenas de KB a ~2 MB são geralmente seguras; documentos extremamente grandes podem atingir timeouts ou limites de tamanho.

Privacidade & Segurança

Os documentos GraphQL são formatados no seu navegador ou no backend do formatador do encode64. Eles não são executados ou enviados para serviços de terceiros. Para esquemas sensíveis, você pode espelhar a mesma configuração localmente com o Prettier.

Equivalente de Linha de Comando (Prettier)

Se você já tem Node.js e Prettier instalados, pode reproduzir esse comportamento localmente.

Node.js (todas as plataformas)

Formatar um arquivo de esquema GraphQL no local

npx prettier --write schema.graphql

O Prettier detecta automaticamente GraphQL com base na extensão do arquivo.

Formatar com indentação e comprimento de linha personalizados

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

Reflete as opções de indentação e quebra expostas na ferramenta online.

Formatar a partir do stdin (ex.: canalizado de outra ferramenta)

cat input.graphql | npx prettier --stdin-filepath input.graphql

Útil em scripts shell, pipelines de CI ou hooks do Git.

Casos de Uso Comuns do Formatador GraphQL

Desenvolvimento de Esquema de API

Manter arquivos de esquema grandes consistentemente formatados para navegação mais fácil
Reduzir diffs de espaços em branco ruidosos em PRs de esquema
Preparar SDL limpo para ferramentas de geração de código

# Antes
type User{ id:ID! name:String!}

# Depois
type User {
  id: ID!
  name: String!
}

Operações e Fragmentos de Frontend

Normalizar consultas compartilhadas em vários aplicativos ou pacotes
Tornar seleções aninhadas mais fáceis de escanear durante a depuração
Manter snippets de documentação e exemplos de playground bem formatados

Testes, Fixtures e Ferramentas

Padronizar fixtures GraphQL usados em testes de snapshot
Integrar formatação em hooks de pré-commit ou jobs de CI
Alimentar documentos limpos em ferramentas de validação ou diff de esquema

❓ Frequently Asked Questions

O que o formatador GraphQL realmente altera?

Ele reestrutura seus documentos GraphQL de acordo com as regras GraphQL do Prettier: indentação, quebras de linha, espaçamento em torno da pontuação e o layout de seleções e campos. Ele não renomeia campos, adiciona argumentos ou altera a semântica do esquema.

Ele suporta tanto operações quanto SDL de esquema?

Sim. O formatador funciona para operações GraphQL padrão (consultas, mutações, assinaturas, fragmentos) e linguagem de definição de esquema (tipos, interfaces, enums, uniões, entradas, diretivas, definições de esquema e extensões).

Comentários e strings de descrição são preservados?

Sim. Strings de descrição entre aspas triplas (`"""…"""`) e comentários inline `#` são preservados. O formatador pode reformatá-los ou ajustar o espaçamento ao redor, mas não os remove intencionalmente.

O meu código GraphQL é executado?

Não. A ferramenta analisa o seu GraphQL como texto para reformatá-lo, mas não executa consultas nem se conecta a qualquer servidor GraphQL.

Onde é executada a formatação: no cliente ou no servidor?

O formatador prefere executar o Prettier diretamente no seu navegador para maior responsividade. Se o plugin GraphQL necessário não puder ser carregado lá, recorre a um worker do Prettier no servidor com as mesmas opções.

É gratuito usar?

Sim. A ferramenta é gratuita com proteções de uso justo para manter o desempenho estável. Para cargas de trabalho pesadas ou privadas, espelhe a mesma configuração com o Prettier no seu próprio ambiente.

Pro Tips

Best Practice

Use este formatador para padronizar esquemas legados antes de adicionar linting ou alterações disruptivas; isso torna os diffs subsequentes muito mais fáceis de revisar.

Best Practice

Alinhe as configurações da ferramenta online (tamanho do recuo e comprimento da linha) com a configuração do Prettier do seu projeto para manter a formatação local e web idênticas.

Best Practice

Extraia strings GraphQL longas incorporadas no código para ficheiros `.graphql` para que possam ser formatadas uniformemente e reutilizadas.

Best Practice

Combine a formatação com o linting (por exemplo, GraphQL ESLint) para detetar problemas de esquema e consulta que vão além dos espaços em branco e quebra de linha.