Usa el Formateador de Consultas GraphQL gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Por que las consultas GraphQL se desordenan
Las consultas GraphQL suelen nacer ordenadas y terminar como una sola linea ilegible. Alguien copia una consulta del panel de herramientas del navegador, o una libreria la registra sin saltos de linea, o un companero la pega en un chat que quita el formato. La consulta sigue funcionando, pero nadie puede leerla, revisarla ni detectar el campo extra que esta ralentizando la respuesta. El formato no es decoracion aqui: es la diferencia entre una consulta que puedes razonar y una que solo puedes esperar que este bien.
A diferencia de JSON, GraphQL tiene su propia gramatica con operaciones, fragmentos, variables, directivas y conjuntos de seleccion anidados. Un embellecedor generico que no entiende esa gramatica rechazara la entrada o la estropeara. Por eso esta herramienta usa Prettier con su plugin GraphQL, el mismo formateador que muchos equipos ya usan en sus editores. Analiza la consulta de verdad y luego la imprime con sangria, saltos de linea y espacios coherentes.
Como usar la herramienta
Pega tu consulta en la caja de entrada y pulsa Formatear consulta. Abajo aparece una version limpia, con cada campo anidado con un nivel mas de sangria y los argumentos faciles de leer. Elige un ancho de linea si tu equipo usa uno: 80 es el valor por defecto, 100 y 120 estan disponibles para pantallas anchas. Si prefieres tabulaciones en vez de espacios, marca la casilla antes de formatear. El boton Copiar pone la consulta formateada en tu portapapeles.
Si la consulta tiene un error de sintaxis, la herramienta lo dice y muestra el mensaje del analizador en vez de adivinar. Eso es util de verdad: una llave que falta o un parentesis sin cerrar se encuentra mucho mas facil cuando el formateador lo senala que cuando miras una cadena de una linea. Corrige el error, formatea de nuevo y aparece la version limpia.
Que revela un buen formato
Una consulta formateada hace visible el exceso de datos. Cuando los campos se anidan diez niveles, ves de un vistazo que una pagina de lista esta pidiendo biografias completas de autores e hilos de comentarios que nunca muestra. Aplanar la sangria en tu cabeza es imposible en una consulta de una linea, pero una formateada muestra la forma al instante. Los revisores tambien detectan campos duplicados, argumentos pasados al nivel equivocado y fragmentos definidos pero nunca usados.
El formato tambien hace legibles las diferencias entre versiones. Dos versiones de una consulta que difieren en un campo producen una comparacion limpia cuando ambas estan formateadas, y un cambio incomprensible de una linea cuando no lo estan. Si tu equipo guarda consultas en control de versiones, formatear antes de guardar ahorra a cada revisor futuro el mismo esfuerzo de vista.
Consultas, mutaciones y fragmentos
El formateador gestiona el documento GraphQL completo, no solo consultas. Las mutaciones se formatean igual, con sus variables y campos de retorno anidados de forma limpia. Los fragmentos mantienen sus definiciones y sus usos, asi que un documento que mezcla varias operaciones se mantiene organizado. Las directivas como @include y @skip se quedan pegadas a los campos que modifican, lo cual importa porque mover una directiva a la linea equivocada cambia a que se aplica.
Las variables tambien merecen cuidado. Una consulta con una lista larga de variables formatea sus definiciones en varias lineas cuando superan el ancho, manteniendo cada variable y su tipo legibles. Los valores por defecto se quedan con sus variables. Si usas la consulta formateada en codigo, recuerda que el formato nunca cambia el significado de la consulta: solo cambia los espacios, asi que el servidor recibe la misma peticion.
Formatear frente a minificar
La gente a veces confunde formatear con minificar. Minificar quita todos los espacios innecesarios para reducir la consulta en el transporte, que es lo que un cliente en produccion debe enviar. Formatear hace lo contrario: anade espacios para que la consulta sea legible para humanos. Usa la version formateada mientras escribes, revisas y depuras, y deja que tu libreria cliente minifique en ejecucion si lo hace. Nunca depures un problema en produccion desde una consulta minificada cuando existe una copia formateada.
Otra distincion: formatear no valida tu esquema. Una consulta puede estar perfectamente formateada y aun asi pedir un campo que no existe, o pasar una variable del tipo equivocado. La validacion del esquema ocurre en el plugin de tu editor, en tu paso de generacion de codigo o en la respuesta de error del servidor. El trabajo del formateador es mas concreto: garantiza que la sintaxis es valida y que el diseno es coherente.
Crear el habito de formatear
La forma mas barata de mantener las consultas legibles es formatear al guardar en tu editor, con la misma configuracion de Prettier que usa esta herramienta. Entonces las consultas pegadas desde registros o paneles de red se vuelven la excepcion, y esta herramienta cubre esos casos: pega, formatea, copia de vuelta. Los equipos que adoptan un ancho de linea y un estilo de sangria dejan de discutir el diseno en las revisiones y empiezan a revisar lo que la consulta pide de verdad.