Formateador de GraphQL
Pega una query, mutation o schema de GraphQL desordenado y obtén código limpio con sangría uniforme, o una sola línea minificada. Todo se ejecuta en tu navegador, así que las APIs y schemas privados nunca salen de tu dispositivo.
Última actualización:
Consejo: pulsa Ctrl + Intro en la entrada para formatear. Todo se ejecuta en tu navegador; tu schema nunca sale de esta página.
Cómo usar Formateador de GraphQL
- Pega tu query, mutation, fragment o schema de GraphQL en el cuadro de entrada, o abre un archivo .graphql.
- Elige la sangría (2 espacios, 4 espacios o tabulaciones) y si quieres conservar los comentarios #.
- Pulsa Formatear GraphQL (o Ctrl + Intro). Con Formatear mientras escribo activado, el resultado se actualiza mientras editas.
- Corrige errores: si la sintaxis no es válida verás la línea y la columna con un acento circunflejo (^); pulsa Mostrar en la entrada para saltar allí.
- Copia o descarga el resultado, o pulsa Minificar para obtener una versión compacta de una sola línea para las peticiones.
Antes y después de formatear
GraphQL ignora los espacios en blanco y las comas, así que las queries copiadas de registros, pestañas de red o generadores de código suelen ser una sola línea densa. El formateador las reconstruye con un campo por línea y un nivel de sangría por cada conjunto de selección:
| Entrada | Formateado |
|---|---|
query($id:ID!){user(id:$id){name,posts(first:5){title}}} | query($id: ID!) { user(id: $id) { name posts(first: 5) { title … |
Guía rápida de sintaxis GraphQL
| Construcción | Ejemplo | Notas |
|---|---|---|
| Alias | small: avatar(size: 32) | Renombra un campo en la respuesta; te permite pedir el mismo campo dos veces. |
| Variables | query Q($first: Int = 10) | Con tipo y valor por defecto opcional; ! marca un tipo obligatorio (no nulo). |
| Fragmento | fragment F on User { id } + ...F | Conjunto de selección reutilizable con una condición de tipo. |
| Fragmento en línea | ... on Admin { permissions } | Selecciona campos solo para un tipo concreto de una interfaz o unión. |
| Directivas | @include(if: $x), @skip, @deprecated | Anotan campos, fragmentos, operaciones o elementos del schema. |
| Valor de objeto de entrada | orderBy: { field: NAME, direction: ASC } | Se mantiene en línea; los enums se escriben sin comillas. |
| Block string | """Multi-line description""" | Se elimina la sangría común, así que el formateador puede volver a sangrarlo con seguridad. |
| Comentario | # note | Llega hasta el final de la línea; el servidor lo ignora. |
Errores de sintaxis GraphQL comunes
- Se esperaba un nombre, se encontró "}": un conjunto de selección vacío como
user { }, o falta un campo después de una coma o de los dos puntos de un alias. - Se esperaba "on": una definición de fragmento necesita una condición de tipo, por ejemplo
fragment UserFields on User. - Cadena sin cerrar: una
"string"normal no puede ocupar varias líneas; usa un"""block string""". - Carácter inesperado: las comillas tipográficas (“ ”) pegadas desde documentos o apps de chat no son válidas. Sustitúyelas por comillas rectas.
- No se permiten variables en valores constantes: los valores por defecto y las directivas de un schema no pueden usar
$variables.
¿También trabajas con las respuestas JSON? Ordénalas con el Formateador JSON, o compara dos versiones de un schema con el Comparador de código.
Preguntas frecuentes
¿Este formateador de GraphQL envía mi query o schema a un servidor?
No. El tokenizador, el parser y el generador de salida son JavaScript simple que se ejecuta en la pestaña de tu navegador. Nada de lo que pegas se sube ni se guarda, así que es seguro para schemas internos y queries que contienen IDs.
¿Valida mi query contra un schema?
Solo comprueba la sintaxis de GraphQL: llaves, cadenas, nombres, argumentos, directivas y estructura de las definiciones, según la gramática de la especificación de GraphQL. No conoce el schema de tu servidor, así que no puede decirte que un campo o tipo no existe.
¿Puede formatear archivos de schema SDL?
Sí. Admite definiciones de type, interface, input, enum, union, scalar, schema y directive, además de extend type y otras extensiones, descripciones entre comillas o en block strings con comillas triples, implements A & B, valores por defecto y directivas repeatable.
¿Qué pasa con las comas en GraphQL?
En GraphQL las comas no tienen significado, igual que los espacios en blanco. El formateador separa los argumentos en línea y los elementos de lista con una coma y un espacio para que se lean mejor, y las elimina cuando los argumentos se dividen en varias líneas o cuando minificas.
¿Se conservan los comentarios?
Sí, los comentarios # se mantienen en su propia línea antes del elemento al que preceden, y un comentario que terminaba una línea se queda al final de esa línea. Desmarca Conservar comentarios # para eliminarlos. Minificar siempre elimina los comentarios, porque el servidor no los necesita.
¿Por qué minificar una query de GraphQL?
Una query minificada ocupa menos en las peticiones HTTP, en los mapas de persisted queries y en las URL de las peticiones GET. El servidor la analiza exactamente igual que la versión formateada, porque los espacios, las comas y los comentarios no tienen significado.
¿Cómo se manejan las líneas largas?
Si los argumentos de un campo, las variables de una operación o los argumentos de una definición de campo hacen que una línea supere los 80 caracteres, cada elemento se coloca en su propia línea, de forma similar a Prettier y a print de graphql-js.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.