Entrada

Salida

¿Qué es el visor de GraphQL?

Si alguna vez has pegado un trozo de SDL de GraphQL que te llegó todo en una línea y has intentado leerlo, ya conoces el problema. Tipos, campos, argumentos, directivas y miembros de uniones se aplastan unos contra otros y la estructura desaparece. Esta herramienta lo arregla. Pega tu esquema en el panel izquierdo y el panel derecho lo renderiza con indentación de dos espacios, un campo por línea, los argumentos en línea y las descripciones en cadena de bloque encima del tipo o campo que documentan.

El formateador es propio — no se carga el paquete npm graphql en la página, así que el primer pintado se mantiene ligero. Tokeniza el SDL, recorre la estructura de llaves y vuelve a emitirlo con un espaciado consistente según la especificación GraphQL de octubre de 2021. Maneja todas las construcciones SDL que ves en la práctica: type, interface, union, enum, input, scalar, extend, schema, modificadores de lista y no nulos ([Foo!]!), valores por defecto, directivas y descripciones con triples comillas. La entrada ya formateada vuelve idéntica.

Todo se ejecuta en tu navegador. Sin subidas, sin esquemas guardados en ningún lado. Pega, lee, copia.

Cómo usar el visor de GraphQL

Tres pasos rápidos. Los botones que se mencionan abajo son los reales que verás en esta página.

Pega, sube o carga un ejemplo

Pega un esquema de GraphQL en el panel izquierdo de Entrada. Pulsa Subir para un archivo .graphql, .graphqls o .gql, o pulsa Ejemplo para cargar un esquema realista de e-commerce. Un ejemplo rápido de cómo se ve un SDL minificado:

type Order{id:ID! placedAt:DateTime! customer:Customer! items:[OrderItem!]! total:Money! status:OrderStatus!} type OrderItem{sku:String! name:String! quantity:Int! unitPrice:Money!}

Funciona tanto con esquemas estilo servidor (con extend type Query) como con definiciones de tipos sueltas. Las formas aceptadas coinciden con lo que parsean herramientas como Apollo Server.

Lee la salida formateada

El panel derecho de Salida renderiza el SDL parseado con indentación de dos espacios. Cada campo, valor de enum y miembro de unión va en su propia línea. Los argumentos quedan en línea con el campo, así que las firmas se leen de forma natural. Las descripciones escritas como cadenas de bloque ("""...""") se mantienen encima del tipo o campo que describen, que es la forma que recomienda la especificación de GraphQL de Relay para documentar un esquema. Si el SDL tiene llaves descompensadas u otros errores de parseo, el visor muestra un mensaje amistoso en lugar de fallar.

Copia o descarga

Pulsa Copiar para llevarte el esquema formateado a un pull request, doc o chat. Pulsa Descargar para guardarlo como .graphql. El botón de limpiar del panel de entrada te deja en blanco. El parseo ocurre del todo en el cliente — tu esquema no sale de la página.

Cuándo lo vas a usar de verdad

Revisar pull requests de esquema

¿Estás revisando un PR de esquema y el diff se lee fatal porque el archivo pasó por un generador de código que se cargó el formato? Pega aquí la versión nueva, échale un ojo a la estructura y vuelve al diff con un modelo mental más claro de lo que cambió. Es especialmente útil cuando el equipo está iterando sobre lo que cuenta como un buen diseño de esquema.

Depurar federación y subgrafos

¿Depurando un gateway de federación de Apollo y el supergrafo compuesto te llega como un bloque enorme? Pega ahí el SDL fusionado, encuentra el tipo que se está portando mal y mira qué subgrafo aporta cada campo. Las directivas de federación que aparecen en la salida quedan documentadas junto al resto de la sintaxis del esquema.

Documentar una API

¿Estás escribiendo documentación pública para una API de GraphQL de tu equipo? Suelta el esquema en el visor, copia la versión formateada en la wiki o el README. La forma de árbol de tipos, interfaces y uniones se lee natural cuando está dispuesta con un campo por línea.

Onboarding de nuevos ingenieros

Tienes a alguien recién llegado intentando aprender la forma de tu API de GraphQL. Un esquema formateado con las descripciones visibles encima de cada tipo es un punto de partida mucho más amigable que el bloque sin formato del codegen.

Preguntas frecuentes

¿Valida mi esquema o solo lo formatea?

Solo lo formatea. El visor comprueba el balance de llaves y comillas lo suficiente para formatear, pero no verifica que exista Query, que los tipos referenciados estén definidos o que los argumentos de las directivas coincidan con sus definiciones. Para una validación completa, usa la implementación de referencia graphql-js o pásalo por las comprobaciones de arranque de tu servidor.

¿Mi esquema se envía a un servidor?

No. El formateador se ejecuta entero en tu navegador. No se sube nada, no se registra nada. Es seguro pegar esquemas internos o no publicados.

¿Maneja descripciones en cadenas de bloque?

Sí. Las descripciones con triples comillas ("""Un pedido realizado por un cliente.""") se preservan y se emiten en la línea de encima del tipo o campo que documentan. Es la forma canónica de escribir documentación SDL según la especificación de GraphQL.

¿Y las directivas y los escalares personalizados?

Se mantienen ambos. @deprecated, @key y cualquier directiva personalizada se quedan en línea en el campo. Los escalares personalizados como scalar DateTime se emiten en su propia línea. El visor no intenta interpretar la semántica de las directivas — eso es cosa de tu servidor.

¿Se reformatea un SDL ya formateado?

Es idempotente — formatear un SDL ya formateado da la misma salida. Así que puedes meter el visor en un check de CI o en un flujo de pegar-y-comparar sin preocuparte por el ruido de espacios en blanco.

¿Cómo de grande puede ser un esquema que pegue?

Lo que tu navegador pueda renderizar con comodidad. Esquemas de unos cientos de tipos no son problema. A partir de 5 MB el propio editor Ace empieza a ir lento — ese es el cuello de botella, no el parser.

Otras herramientas de GraphQL

Visualizar es solo una parte de trabajar con GraphQL. Estas herramientas se encargan del resto:

Visor de GraphQL