Softonic

Constructor de Consultas GraphQL

Paso 1 / 2
Argumentos
Generar consulta

Escribir una operación GraphQL a mano significa mantener en orden las llaves, los argumentos y la indentación. Este constructor arma el documento por ti: elige consulta, mutación o suscripción, nombra la operación, fija el campo raíz, añade argumentos y enumera los campos que necesitas. Obtienes una operación con formato listo para pegar directamente en Apollo, urql o GraphiQL.

Cómo construir una operación GraphQL

  1. 1

    Elige el tipo de operación

    Selecciona consulta, mutación o suscripción en el desplegable. Esto define el tipo de operación que ejecutará el servidor.

  2. 2

    Nombra la operación

    Ponle un nombre como GetUser para que el servidor pueda registrarla y almacenarla en caché. El nombre es opcional; el constructor funciona sin él.

  3. 3

    Fija el campo raíz

    Escribe el campo que quieres llamar, por ejemplo user, createPost u orderUpdated.

  4. 4

    Añade argumentos

    Añade pares clave-valor como id: "123" o id: $id. Las filas con clave vacía se omiten.

  5. 5

    Enumera los campos y copia

    Escribe un campo por línea, construye la consulta y copia el documento formateado al portapapeles.

Trabajar con documentos GraphQL

Un documento GraphQL es un conjunto de una o más operaciones más cualquier fragmento que referencien. Cada operación nombra un campo raíz del tipo Query, Mutation o Subscription, y el servidor resuelve el conjunto de selección que solicitas. El constructor escribe el texto de la operación por ti, pero no conoce tu esquema, así que comprueba cada nombre de campo y de argumento contra tu API antes de ejecutar la operación.

Anatomía de la operación

Parte Propósito Ejemplo
Tipo de operación Consulta, mutación o suscripción query, mutation, subscription
Nombre de operación Usado para caché y registros GetUserById
Argumentos Valores que se pasan al campo raíz user(id: "123")
Conjunto de selección Campos y selecciones anidadas { user(id: "123") { name posts { title } } }
Variables Entradas tipadas declaradas junto al nombre de la operación query GetUser($id: ID!) { user(id: $id) { name } }

Errores comunes

  • Las variables requeridas terminan con !. Olvidarlo en argumentos marcados como NonNull en el esquema produce un error de validación antes de que se ejecute el resolver.
  • Los argumentos de texto necesitan comillas. Un valor como 123 es un número; un valor de texto debe escribirse "123" con comillas dobles dentro de la fila de argumentos.
  • Los tipos de unión e interfaz requieren fragmentos en línea ... on TypeName para leer campos específicos de tipo.
  • El alias es obligatorio cuando solicitas el mismo campo dos veces con argumentos diferentes, por ejemplo today: stats(period: DAY) y week: stats(period: WEEK).
  • Las conexiones (especificación Relay) exponen edges { node { ... } } y pageInfo { endCursor hasNextPage }; omitir cualquiera de ellos rompe la paginación.

Consejos

  • Mantén las operaciones pequeñas y con nombre para que Apollo Client pueda almacenarlas en caché individualmente.
  • Pasa los valores que cambian como variables en lugar de literales, así el servidor analiza el documento una vez y lo reutiliza; decláralas junto al nombre de la operación, por ejemplo query GetUser($id: ID!).
  • Si un campo necesita varios argumentos, escríbelos en una sola fila de argumentos separados por comas, por ejemplo filter: { status: ACTIVE } como valor.
  • El constructor emite exactamente el texto que configuras. Si una operación falla, compara primero los nombres de tus campos con el esquema actual.

Preguntas frecuentes

No. Solo da formato al texto que introduces; no hay ningún endpoint que llamar ni se necesita un esquema. Rellena las partes de la operación y el constructor arma el documento por ti.

Sí. Usa el desplegable de operación para alternar entre consulta, mutación y suscripción. Todo lo demás funciona igual: nombre, campo raíz, argumentos y campos.

Añade filas en la sección de argumentos. La clave es el nombre del argumento y el valor es lo que pasas, por ejemplo id: “123” o id: $id. Las filas con clave vacía se ignoran. Si escribes una variable como $id, declárala tú mismo junto al nombre de la operación, por ejemplo query GetUser($id: ID!).

El constructor emite exactamente el texto que escribiste. El error suele significar que un nombre de campo o de argumento no coincide con el esquema de tu servidor: compara el campo raíz y cada nombre de campo con tu API y corrige la ortografía.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Hoja de trucos de Markdown

Referencia práctica de Markdown con vistas previas reales y ejemplos listos para copiar de encabezados, listas, tablas, código, enlaces, imágenes y sintaxis GFM.

Herramienta disponible en otros idiomas