Editor de consultas/mutaciones
Este tema describe la estructura del editor de consultas/mutaciones del cuadro de diálogo Configuración GraphQL y explica cómo trabajar con el editor.
Para obtener información sobre conceptos básicos asociados a las consultas y mutaciones GraphQL, consulte las siguientes páginas:
Para saber más sobre las consultas y mutaciones, vea Ejemplos.
Estructura del editor
La imagen siguiente muestra el editor de consultas/mutaciones del cuadro de diálogo Configuración GraphQL.
Observe cómo se organiza el editor:
•el lado izquierdo se utiliza para crear una consulta o una mutación.
•el lado derecho muestra el panel del explorador, que contiene tres bloques de información: elementos disponibles en el esquema para la celda actual, tipo de datos y descripción del elemento seleccionado.
Los campos del panel del explorador tienen números entre paréntesis y llaves, por ejemplo, products (8) {3}. El número entre paréntesis (p. ej., (8)) indica el número de argumentos que el campo puede aceptar. El número entre llaves (p. ej., {3}) muestra cuántos subcampos existen para este campo.
Conceptos y aspectos básicos
•Una celda es un contenedor para un solo nombre, valor o botón, lo cual es similar a una celda de una hoja de cálculo.
•Un nodo de árbol tiene una celda principal, posiblemente celdas de datos adicionales y, opcionalmente, nodos secundarios. Cada instancia de campos, argumentos, etc. está representada por su propio nodo de árbol.
•La celda principal suele ser el nombre del nodo actual. Sin embargo, hay dos excepciones: Para la operación, la celda principal es el tipo de operación. Sin embargo, para fragmentos, la celda principal es la palabra clave fragment.
•Hay un modo de navegación y un modo de edición de celdas, parecido a lo que ocurre en las aplicaciones de hojas de cálculo.
•Hay una celda resaltada, lo cual indica la posición actual en el árbol.
•La fila resaltada es la línea que contiene la celda resaltada.
•Si se puede añadir algo, aparece un botón Añadir (+) en la fila resaltada o al pasar el puntero del ratón por encima. Estos son los elementos que se pueden añadir:
o(+) añade un elemento del tipo correspondiente para la ubicación del botón Añadir. Si el botón Añadir es rojo, se requiere al menos un elemento en esta ubicación. Tras hacer clic en un botón Añadir, aparece un nodo marcador de posición para permitir el relleno de las celdas. Si no se introduce nada, el nodo marcador de posición desaparece si se aleja de él.
o(,,,) añade un argumento.
o($) añade una definición de variable a la operación.
o(=) añade un valor predeterminado a la definición de la variable.
o(@) añade una directiva.
o(:) añade un alias a un campo.
o(+ fragment) añade un fragmento.
•Los mensajes de error se muestran directamente debajo de los nodos del árbol donde se detecten errores.
Cambiar entre una consulta y una mutación
En el editor, puede definir solo una operación GraphQL (una consulta o una mutación) y cero o más fragmentos. Para cambiar entre una consulta y una mutación, compruebe que la celda superior esté resaltada y, luego, haga una de estas dos cosas:
•Pulse la tecla ENTRAR para abrir la lista desplegable y seleccionar el tipo de operación deseado.
•Haga clic en la celda superior para abrir la lista desplegable y seleccione el tipo de operación deseado.
•Pulse la tecla q para seleccionar una consulta o m para seleccionar una mutación.
Accesos directos y funciones del ratón
En el editor, se puede navegar utilizando las teclas del ratón o del teclado. Para saber más, siga leyendo.
Modo de navegación
•Utilice las teclas de cursor, Tabulador, Mayús+Tabulador, Av Pág, Re Pág para desplazarse.
•Para activar un botón Añadir resaltado, pulse Entrar.
•Para cambiar al modo de edición de celdas, presione Entrar o F2, o comience a escribir.
•Si la celda resaltada es la celda principal de un nodo de árbol, todo el nodo se considera seleccionado. Esto se indica mediante una barra de color en el borde izquierdo.
•Utilice Ctrl+X o Ctrl+C para cortar o copiar la selección actual (todo el nodo de árbol o la celda actual), respectivamente, en el portapapeles en formato de texto.
•Utilice Supr para eliminar la selección actual (todo el nodo de árbol o la celda actual).
•Utilice Ctrl+V para insertar el contenido del portapapeles en la ubicación actual. Esto solo funciona si el portapapeles contiene texto que es válido para insertar en la ubicación actual. De lo contrario, aparece un mensaje de error.
•Utilice Ctrl+Z para deshacer la última acción.
•Utilice Ctrl+Y para revertir la última acción Deshacer.
•En el tipo o nombre de la operación, "$" añade una definición de variable.
•En la celda de nombres de selecciones, definiciones de variables, argumentos o directivas, "," añade un hermano después del campo actual.
•En la celda nombre de un campo:
o"(" añade un argumento,
o"@" añade una directiva,
o"{" añade una selección de secundarios.
•Utilice ESC para salir del cuadro de diálogo sin guardar (se le preguntará si desea descartar los cambios). Esta acción tiene el mismo efecto que hacer clic en Cancelar.
•Utilice Ctrl+Entrar para salir del cuadro de diálogo guardando (igual que si se hace clic en Aceptar).
•Utilice Ctrl+Tab o Ctrl+Mayús+Tab para mover el foco del teclado fuera del editor GraphQL.
Modo de edición de celda
•Puede escribir y editar valores en los campos de entrada.
•El panel del explorador muestra los elementos disponibles que comienzan con el texto escrito.
•Utilice las teclas de cursor arriba/abajo y Av Pág y Re Pág para elegir un elemento del panel del explorador. Si lo prefiere, puede usar el ratón.
•Utilice ENTRAR para confirmar el texto editado.
•Utilice ESC para descartar el texto editado.
•Utilice Tabulador para confirmar y pasar a la siguiente celda (Mayús+Tabulador para la celda anterior).
•Escriba "...minombredefragmento" para crear una propagación de fragmentos.
•Escriba "...on mitipo" para crear un fragmento en línea.
•Escriba "..." para crear un fragmento en línea sin condición de tipo.
•Además, en las selecciones, definiciones de variables o argumentos recién insertados, puede escribir no sólo el nombre sino una expresión GraphQL completa que sea válida en este lugar y que se insertará tras pulsar Entrar. Por ejemplo, al escribir "mialias:micampo(arg:10)" se creará un campo con un alias y un argumento con un valor.
Funciones del ratón
•Haga clic en una celda para activarla.
•Haga clic en un botón Añadir para activarlo.
•Haga doble clic en una celda para entrar en su modo de edición.
•Haga clic en el panel del explorador para establecer una selección.
•Haga doble clic en el panel del explorador para aplicar una selección.
Ejemplo de definición de consulta en el GIF
La siguiente demostración muestra cómo se crea una consulta en el editor del cuadro de diálogo Configuración GraphQL.
