Formateador GraphQL Gratuito | Formato Basado en Prettier para Consultas y Esquemas

Loading…

Acerca de Formateador GraphQL en Línea

Mantén tu SDL y operaciones GraphQL legibles y consistentes. Este formateador GraphQL en línea utiliza el analizador GraphQL de Prettier para re-sangrar, ajustar y normalizar tus documentos. Se ejecuta en el navegador cuando es posible y recurre a un formateador de servidor cuando es necesario, para que obtengas resultados confiables sin preocuparte por las herramientas.

Lo Que Hace Este Formateador GraphQL

Utiliza el analizador GraphQL de Prettier para aplicar formato consistente y estándar de la comunidad
Soporta consultas, mutaciones, suscripciones, fragmentos y SDL de esquema completo (tipos, interfaces, uniones, enumeraciones, entradas, directivas)
Sangría ajustable: elige espacios o tabs y configura el tamaño de sangría (1–8)
Control opcional de longitud de línea / ajuste mediante un ancho de columna configurable
Mantiene descripciones (`"""…"""`) y comentarios en línea intactos mientras normaliza su disposición
Valida la estructura de tu documento GraphQL como parte del formateo; la sintaxis inválida mostrará errores en lugar de dañar el código silenciosamente
Ejecución híbrida: ejecuta Prettier en el navegador cuando está disponible y recurre a un formateador de servidor si es necesario
Pega o sube archivos `.graphql` / `.gql`, luego previsualiza, copia o descarga el resultado formateado

📝 Cómo Formatear GraphQL en Línea for graphql-formatter

Pega o Sube tu GraphQL

Pega tu esquema o consultas de GraphQL en el editor, o suelta un archivo `.graphql` / `.gql`. El formateador funciona tanto para documentos SDL como de operaciones.

Ajusta las Opciones de Formato

Elige espacios o tabulaciones, establece el tamaño de la sangría y configura tu longitud de línea preferida. Estas opciones se pasan al formateador GraphQL de Prettier.

Formatea, Revisa y Exporta

Haz clic en Formatear para aplicar los cambios. Revisa el resultado en el panel de vista previa, luego cópialo de vuelta a tu editor o descarga el archivo formateado.

Especificaciones Técnicas

Entrada Compatible

Diseñado para documentos estándar de esquema y operaciones de GraphQL.

Tipo	Ejemplos	Notas
Esquema SDL	schema.graphql, schema.gql	Tipos, interfaces, uniones, enumeraciones, entradas, directivas, definición de esquema
Operaciones	queries.graphql, app.gql	Consultas, mutaciones, suscripciones y fragmentos
Extensiones	extensiones de esquema en archivos separados	por ejemplo, bloques `extend type Query { … }`

Motor de Formateo

El formateo se realiza utilizando el soporte GraphQL de Prettier. En la mayoría de los casos, Prettier se ejecuta en el navegador a través de un entorno de ejecución ligero. Si el complemento de GraphQL no puede resolverse en el entorno actual, el formateador cambia automáticamente a un trabajador de Prettier en el servidor.

Opciones Disponibles (Mapeadas a Prettier)

Opción	Comportamiento	Valores Típicos
Estilo de Sangría	Elige entre espacios y tabulaciones	espacio (predeterminado) o tabulación
Tamaño de Sangría	Número de espacios por nivel de sangría (al usar espacios)	1–8, predeterminado: 2
Longitud de Línea	Columna objetivo para ajustar o dividir selecciones largas	0–120 (0 ≈ sin ajuste efectivo)

Límites y Rendimiento

La herramienta está ajustada para esquemas y archivos de operaciones GraphQL típicos. Las solicitudes alrededor de unos pocos cientos de KB hasta ~2 MB son generalmente seguras; documentos extremadamente grandes pueden encontrar tiempos de espera o límites de tamaño.

Privacidad y Seguridad

Los documentos GraphQL se formatean en su navegador o en el backend de formateo de encode64. No se ejecutan ni se envían a servicios de terceros. Para esquemas sensibles, puede replicar la misma configuración localmente con Prettier.

Equivalente de Línea de Comandos (Prettier)

Si ya tiene Node.js y Prettier instalados, puede reproducir este comportamiento localmente.

Node.js (todas las plataformas)

Formatear un archivo de esquema GraphQL in situ

npx prettier --write schema.graphql

Prettier detecta automáticamente GraphQL basándose en la extensión del archivo.

Formatear con sangría y longitud de línea personalizadas

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

Refleja las opciones de sangría y ajuste expuestas en la herramienta en línea.

Formatear desde stdin (ej. canalizado desde otra herramienta)

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

Útil en scripts de shell, pipelines de CI o hooks de Git.

Casos de Uso Comunes del Formateador GraphQL

Desarrollo de Esquemas API

Mantener archivos de esquema grandes consistentemente formateados para una navegación más fácil
Reducir diferencias de espacios en blanco ruidosas en PRs de esquemas
Preparar SDL limpio para herramientas de generación de código

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

# Después
type User {
  id: ID!
  name: String!
}

Operaciones y Fragmentos Frontend

Normalizar consultas compartidas en múltiples aplicaciones o paquetes
Hacer que las selecciones anidadas sean más fáciles de escanear durante la depuración
Mantener fragmentos de documentación y ejemplos de playground bien formateados

Pruebas, Fixtures y Herramientas

Estandarizar fixtures GraphQL utilizados en pruebas de snapshot
Integrar el formateo en hooks pre-commit o trabajos de CI
Alimentar documentos limpios en herramientas de validación o comparación de esquemas

❓ Frequently Asked Questions

¿Qué cambia realmente el formateador GraphQL?

Reestructura sus documentos GraphQL según las reglas GraphQL de Prettier: sangría, saltos de línea, espaciado alrededor de la puntuación y el diseño de selecciones y campos. No renombra campos, agrega argumentos ni cambia la semántica del esquema.

¿Admite tanto operaciones como SDL de esquema?

Sí. El formateador funciona para operaciones GraphQL estándar (consultas, mutaciones, suscripciones, fragmentos) y lenguaje de definición de esquema (tipos, interfaces, enumeraciones, uniones, entradas, directivas, definiciones de esquema y extensiones).

¿Se conservan los comentarios y cadenas de descripción?

Sí. Las cadenas de descripción entre comillas triples (`"""…"""`) y los comentarios en línea `#` se conservan. El formateador puede redistribuirlos o ajustar el espacio en blanco circundante, pero no los elimina intencionalmente.

¿Se ejecuta mi código GraphQL?

No. La herramienta analiza tu GraphQL como texto para reformatearlo, pero no ejecuta consultas ni se conecta a ningún servidor GraphQL.

¿Dónde se ejecuta el formateo: en el cliente o en el servidor?

El formateador prefiere ejecutar Prettier directamente en tu navegador para mayor capacidad de respuesta. Si el plugin de GraphQL requerido no puede cargarse allí, recurre a un worker de Prettier en el servidor con las mismas opciones.

¿Es gratuito su uso?

Sí. La herramienta es gratuita con protecciones de uso justo para mantener un rendimiento estable. Para cargas de trabajo intensivas o privadas, replica la misma configuración con Prettier en tu propio entorno.

Pro Tips

Best Practice

Usa este formateador para estandarizar esquemas heredados antes de agregar linting o cambios disruptivos; hace que los diffs posteriores sean mucho más fáciles de revisar.

Best Practice

Alinea la configuración de tu herramienta en línea (tamaño de sangría y longitud de línea) con la configuración de Prettier de tu proyecto para mantener el formateo local y web idénticos.

Best Practice

Extrae cadenas GraphQL largas incrustadas en código a archivos `.graphql` para que puedan formatearse uniformemente y reutilizarse.

Best Practice

Combina el formateo con linting (por ejemplo, GraphQL ESLint) para detectar problemas de esquema y consultas que van más allá de los espacios y el ajuste de línea.