Explorar las API de GraphQL explore-graphql-apis
La API de GraphQL AEM de proporciona un potente lenguaje de consulta para exponer los datos de los fragmentos de contenido a aplicaciones de flujo descendente. Los modelos de fragmento de contenido definen el esquema de datos que utilizan los fragmentos de contenido. Siempre que se crea o actualiza un modelo de fragmento de contenido, el esquema se traduce y se agrega al "gráfico" que conforma la API de GraphQL.
En este capítulo, vamos a explorar algunas consultas comunes de GraphQL para recopilar contenido mediante un IDE denominado GraphiQL. El IDE de GraphiQL permite probar y refinar rápidamente las consultas y los datos devueltos. También facilita el acceso a la documentación, lo que facilita la comprensión de los métodos disponibles.
Requisitos previos prerequisites
Este es un tutorial de varias partes y se da por hecho que se han completado los pasos descritos en Creación de fragmentos de contenido.
Objetivos objectives
- Aprenda a utilizar la herramienta GraphiQL para construir una consulta con sintaxis de GraphQL.
- Obtenga información sobre cómo consultar una lista de fragmentos de contenido y un solo fragmento de contenido.
- Obtenga información sobre cómo filtrar y solicitar atributos de datos específicos.
- Obtenga información sobre cómo unirse a una consulta de varios modelos de fragmentos de contenido
- Obtenga información sobre cómo mantener la consulta de GraphQL.
Habilitación del punto de conexión de GraphQL enable-graphql-endpoint
Se debe configurar un punto de conexión de GraphQL para habilitar las consultas de API de GraphQL para los fragmentos de contenido.
-
AEM En la pantalla Inicio de la, vaya a Herramientas > General > GraphQL.
-
Pulse Crear en la esquina superior derecha, en el cuadro de diálogo resultante, introduzca los siguientes valores:
- Nombre*: Mi Extremo De Proyecto.
- Usar esquema de GraphQL proporcionado por… *: Mi proyecto
Pulse Crear para guardar el extremo.
Los extremos de GraphQL creados en función de una configuración de proyecto solo permiten consultas con modelos que pertenecen a ese proyecto. En este caso, se pueden usar las únicas consultas contra los modelos Person y Team.
note note NOTE También se puede crear un punto de conexión global para habilitar consultas de modelos en varias configuraciones. AEM Esto debe utilizarse con precaución, ya que puede abrir el entorno a vulnerabilidades de seguridad adicionales y aumentar la complejidad general de la administración de los recursos de la. -
Ahora debería ver un extremo de GraphQL habilitado en su entorno.
Uso del IDE de GraphiQL
AEM La herramienta GraphiQL permite a los desarrolladores crear y probar consultas de contenido en el entorno de trabajo actual de la. La herramienta GraphiQL también permite a los usuarios mantener o guardar consultas para que las usen las aplicaciones cliente en una configuración de producción.
AEM A continuación, explore la potencia de la API de GraphQL de mediante el IDE integrado de GraphiQL.
-
AEM En la pantalla Inicio de la, vaya a Herramientas > General > Editor de consultas de GraphQL.
note note NOTE AEM En, es posible que las versiones anteriores del IDE de GraphiQL no estén integradas. Se puede instalar manualmente siguiendo estas instrucciones. -
En la esquina superior derecha, asegúrese de que el Extremo está establecido en Mi extremo del proyecto.
Esto ampliará todas las consultas a los modelos creados en el proyecto Mi proyecto.
Consulta de una lista de fragmentos de contenido query-list-cf
Un requisito común es consultar varios fragmentos de contenido.
-
Pegue la siguiente consulta en el panel principal (reemplazando la lista de comentarios):
code language-graphql query allTeams { teamList { items { _path title } } }
-
Presione el botón Reproducir en el menú superior para ejecutar la consulta. Debería ver los resultados de los fragmentos de contenido del capítulo anterior:
-
Coloque el cursor debajo del texto
title
y escriba CTRL+espacio para almacenar en déclencheur las sugerencias para el código. Agregueshortname
ydescription
a la consulta. -
Vuelva a ejecutar la consulta presionando el botón Reproducir y debería ver que los resultados incluyen las propiedades adicionales de
shortname
ydescription
.shortname
es una propiedad simple ydescription
es un campo de texto multilínea y la API de GraphQL nos permite elegir varios formatos para los resultados comohtml
,markdown
,json
oplaintext
.
Consulta de fragmentos anidados
A continuación, el experimento con la consulta está recuperando fragmentos anidados. Recuerde que el modelo Equipo hace referencia al modelo Persona.
-
Actualice la consulta para incluir la propiedad
teamMembers
. Recuerde que este es un campo Referencia de fragmento al modelo de persona. Se pueden devolver las propiedades del modelo Person:code language-graphql query allTeams { teamList { items { _path title shortName description { plaintext } teamMembers { fullName occupation } } } }
Respuesta JSON:
code language-json { "data": { "teamList": { "items": [ { "_path": "/content/dam/my-project/en/team-alpha", "title": "Team Alpha", "shortName": "team-alpha", "description": { "plaintext": "This is a description of Team Alpha!" }, "teamMembers": [ { "fullName": "John Doe", "occupation": [ "Artist", "Influencer" ] }, { "fullName": "Alison Smith", "occupation": [ "Photographer" ] } ] } ] } } }
AEM La capacidad de realizar consultas con fragmentos anidados es una práctica funcionalidad de la API de GraphQL de. En este ejemplo sencillo, el anidamiento tiene solo dos niveles de profundidad. Sin embargo, es posible anidar fragmentos aún más. Por ejemplo, si había un modelo Address asociado con una Persona, sería posible devolver datos de los tres modelos en una sola consulta.
Filtrado de una lista de fragmentos de contenido filter-list-cf
A continuación, veamos cómo es posible filtrar los resultados a un subconjunto de fragmentos de contenido en función de un valor de propiedad.
-
Introduzca la siguiente consulta en la interfaz de usuario de GraphiQL:
code language-graphql query personByName($name:String!){ personList( filter:{ fullName:{ _expressions:[{ value:$name _operator:EQUALS }] } } ){ items{ _path fullName occupation } } }
La consulta anterior realiza una búsqueda de todos los fragmentos de persona en el sistema. El filtro agregado al principio de la consulta realiza una comparación en el campo
name
y la cadena de variable$name
. -
En el panel Variables de consulta, escriba lo siguiente:
code language-json {"name": "John Doe"}
-
Ejecute la consulta, se espera que solo se devuelva el fragmento de contenido Personas con un valor de
John Doe
.Hay muchas otras opciones para filtrar y crear consultas complejas. Vea Aprender a usar GraphQL AEM con: contenido de muestra y consultas.
-
Mejore la consulta anterior para recuperar la imagen del perfil
code language-graphql query personByName($name:String!){ personList( filter:{ fullName:{ _expressions:[{ value:$name _operator:EQUALS }] } } ){ items{ _path fullName occupation profilePicture{ ... on ImageRef{ _path _authorUrl _publishUrl height width } } } } }
profilePicture
es una referencia de contenido y se espera que sea una imagen; por lo tanto, se utiliza el objetoImageRef
integrado. Esto nos permite solicitar datos adicionales sobre la imagen a la que se hace referencia, comowidth
yheight
.
Consultar un solo fragmento de contenido query-single-cf
También es posible consultar directamente un solo fragmento de contenido. AEM El contenido de los fragmentos se almacena de manera jerárquica y el identificador único de un fragmento se basa en la ruta del fragmento.
-
Introduzca la siguiente consulta en el editor de GraphiQL:
code language-graphql query personByPath($path: String!) { personByPath(_path: $path) { item { fullName occupation } } }
-
Escriba lo siguiente para las variables de consulta:
code language-json {"path": "/content/dam/my-project/en/alison-smith"}
-
Ejecute la consulta y observe que se devuelve el único resultado.
Persistir consultas persist-queries
AEM Una vez que el desarrollador esté satisfecho con la consulta y los datos de resultados devueltos por la consulta, el siguiente paso es almacenar o mantener la consulta en la que se va a realizar el. Las consultas persistentes son el mecanismo preferido para exponer la API de GraphQL a aplicaciones cliente. Una vez que una consulta ha persistido, se puede solicitar mediante una solicitud de GET y se puede almacenar en caché en las capas de Dispatcher y CDN. El rendimiento de las consultas persistentes es mucho mejor. Además de las ventajas de rendimiento, las consultas persistentes garantizan que los datos adicionales no se expongan accidentalmente a las aplicaciones cliente. Encontrará más detalles sobre consultas persistentes aquí.
A continuación, mantenga dos consultas simples, que se utilizan en el capítulo siguiente.
-
Introduzca la siguiente consulta en el IDE de GraphiQL:
code language-graphql query allTeams { teamList { items { _path title shortName description { plaintext } teamMembers { fullName occupation } } } }
Compruebe que la consulta funciona.
-
A continuación, pulse Guardar como e introduzca
all-teams
como Nombre de la consulta.La consulta debe mostrarse bajo Consultas persistentes en el carril izquierdo.
-
A continuación, pulse los puntos suspensivos … junto a la consulta persistente y pulse Copiar URL para copiar la ruta de acceso en el portapapeles.
-
Abra una pestaña nueva y pegue la ruta copiada en el explorador:
code language-plain https://$YOUR-AEMasCS-INSTANCEID$.adobeaemcloud.com/graphql/execute.json/my-project/all-teams
Debe ser similar a la ruta anterior. Debe ver que se devuelven los resultados JSON de la consulta.
Desglose de la dirección URL anterior:
table 0-row-2 1-row-2 2-row-2 3-row-2 Nombre Descripción /graphql/execute.json
Punto final de consulta persistente /my-project
Configuración del proyecto para /conf/my-project
/all-teams
Nombre de la consulta persistente -
Vuelva al IDE de GraphiQL y utilice el botón más + para mantener la NUEVA consulta
code language-graphql query personByName($name: String!) { personList( filter: { fullName:{ _expressions: [{ value: $name _operator:EQUALS }] } }){ items { _path fullName occupation biographyText { json } profilePicture { ... on ImageRef { _path _authorUrl _publishUrl width height } } } } }
-
Guarde la consulta como:
person-by-name
. -
Debe tener dos consultas persistentes guardadas:
Publish GraphQL Endpoint y consultas persistentes
Tras la revisión y verificación, publique GraphQL Endpoint
y Persisted Queries
-
AEM En la pantalla Inicio de la, vaya a Herramientas > General > GraphQL.
-
Puntee en la casilla que está junto a Mi extremo del proyecto y luego en Publish
-
AEM En la pantalla de inicio de la, vaya a Herramientas > General > Editor de consultas de GraphQL
-
Pulse la consulta todos los equipos del panel Consultas persistentes y pulse Publish
-
Repita el paso anterior para la consulta
person-by-name
Archivos de solución solution-files
Descargue el contenido, los modelos y las consultas persistentes creados en los últimos tres capítulos: basic-tutorial-solution.content.zip
Recursos adicionales
Obtenga más información acerca de las consultas de GraphQL en Aprender a usar GraphQL AEM con el contenido de muestra y las consultas de muestra.
Enhorabuena. congratulations
¡Felicidades, ha creado y ejecutado varias consultas de GraphQL!
Siguientes pasos next-steps
En el capítulo siguiente, Generar aplicación React, explora cómo una aplicación externa puede consultar los extremos de GraphQL y utilizar estos dos extremos de consultas persistentes para crear consultas que se pueden usar para crear consultas de manera que se puedan usar en el caso de los extremos de AEM. También se le presentarán algunas funciones básicas de gestión de errores durante la ejecución de consultas de GraphQL.
Instalación de la herramienta GraphiQL (opcional) install-graphiql
AEM En, algunas versiones de la herramienta IDE de GraphiQL (6.X.X) que deben instalarse manualmente, utilizan las instrucciones desde aquí.