Constructor de consultas GraphQL

El Constructor de Consultas GraphQL es una herramienta online gratuita que crea visualmente consultas, mutaciones y suscripciones de GraphQL con árboles de campos dinámicos, variables, fragmentos y salida en vivo. Funciona por completo en tu navegador, sin necesidad de instalación ni registro.

Query, Mutation y Subscription. El constructor ajusta la sintaxis según el tipo de operación.

Define variables tipadas ($userId: ID!) en la sección Variables y referéncialas en los argumentos. Los fragmentos definen selecciones de campos reutilizables sobre un tipo.

Sí, del lado del cliente, sin registro y sin servidor.

Por completo. El Constructor de Consultas GraphQL procesa todo del lado del cliente, en tu navegador. No se sube ningún dato a ningún servidor ni se almacena en él. Tu contenido permanece siempre privado en tu dispositivo.

Sí, el Constructor de Consultas GraphQL es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No hace falta ninguna cuenta ni registro. Solo abre el Constructor de Consultas GraphQL en tu navegador y empieza a usarlo de inmediato. No hay barreras de registro ni restricciones de uso.

El Constructor de Consultas GraphQL admite una amplia variedad de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones compatibles.

Solo introduce tu entrada en el campo correspondiente, ajusta las opciones a tu gusto y la herramienta la procesará al instante. Después puedes copiar el resultado al portapapeles o descargarlo.

El Constructor de Consultas GraphQL funciona en todos los navegadores modernos, como Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

Una query lee datos sin cambiar nada — pide al servidor unos campos específicos y los recibe de vuelta, de forma parecida a una petición GET. Una mutation escribe datos: crea, actualiza o elimina registros y normalmente devuelve el objeto afectado para que puedas confirmar el cambio. Ambas usan la misma sintaxis de conjunto de selección para elegir qué campos regresan, pero declaran palabras clave de operación distintas (query frente a mutation) y las mutations casi siempre llevan argumentos de entrada, muchas veces una variable tipada como un objeto de entrada (input object). Existe además un tercer tipo, subscription, que mantiene una conexión abierta para actualizaciones en tiempo real. En este constructor eliges el tipo de operación al principio y él ajusta la palabra clave y la estructura generadas para que coincidan, así puedes alternar entre una consulta de lectura y una mutación de escritura sin reescribir el envoltorio a mano.

Declara cada entrada como una variable con nombre en la firma de la operación, dale un tipo GraphQL como ID!, Int o String, y luego referénciala dentro de un argumento con un signo de dólar — por ejemplo user(id: $userId). Enviar los valores por separado como un objeto JSON mantiene la consulta reutilizable, permite que tu cliente la almacene en caché y evita los errores de comillas y escapado que surgen al inyectar valores directamente en la cadena. El signo de exclamación después de un tipo indica que la variable es obligatoria. En este constructor, declarar variables en la sección de Variables las incorpora automáticamente en la firma, y escribir un valor que empiece con $ dentro de cualquier argumento se reconoce como una referencia a variable. También genera un objeto JSON de Variables listo para pegar junto con la consulta, para que puedas llevarte ambos directo a Postman o a tu cliente de API.

Un fragmento es un conjunto de campos con nombre y reutilizable, definido sobre un tipo específico — por ejemplo fragment UserFields on User { id name email }. En lugar de repetir la misma selección de campos en varios lugares, la defines una vez y la insertas donde la necesites. Los fragmentos mantienen legibles las consultas grandes, garantizan que dos partes de una petición pidan la misma forma de datos, y facilitan los cambios de esquema porque editas la lista de campos en un solo sitio. Son especialmente útiles cuando varias consultas devuelven el mismo tipo de objeto o cuando un componente de interfaz siempre necesita las mismas propiedades. En este constructor agregas un fragmento, le das un nombre y un tipo de destino, y construyes su árbol de campos de la misma forma en que construyes la selección principal — la salida generada incluye la definición del fragmento, lista para usarse de inmediato.

GraphQL está diseñado para que el cliente declare exactamente qué campos quiere, y el servidor devuelva solo esos — nada más. Esto es lo contrario de un endpoint REST típico, que envía un payload fijo sin importar lo que realmente vayas a usar. Pedir campos precisos significa respuestas más pequeñas, menos sobrecarga de datos que terminarías descartando, y ningún viaje adicional de ida y vuelta para reunir registros relacionados, ya que puedes anidar subselecciones para traer objetos conectados en una sola petición. La contrapartida es que cada campo que quieras debe nombrarse explícitamente en el conjunto de selección, algo fácil de escribir mal sin darte cuenta a medida que las consultas crecen. Este constructor hace visual esa selección explícita — haces clic para agregar y anidar campos a cualquier profundidad, y él escribe el conjunto de selección correspondiente para que la estructura refleje la forma de datos que necesitas.

La salida con sangría (prettified) se formatea en varias líneas con una indentación uniforme, de modo que los conjuntos de selección anidados, los argumentos y los fragmentos son fáciles de leer y revisar — es el formato que quieres al subir una consulta a control de versiones o compartirla con tu equipo. La salida minificada colapsa la misma consulta en una sola línea, eliminando los espacios extra, lo cual resulta práctico cuando incrustas la cadena de la consulta directamente dentro de código o de un valor de configuración donde los saltos de línea estorban. Ambas son funcionalmente idénticas para el servidor; solo cambia el espaciado, así que puedes alternar libremente sin afectar el comportamiento. En este constructor, un solo interruptor cambia entre ambas vistas al instante, y desde cualquiera de las dos puedes copiar la consulta, copiar el JSON de Variables o descargar la operación como un archivo .graphql.