Explorar las API de GraphQL

En la pantalla de inicio de AEM, 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

También se puede crear un punto de conexión global para habilitar consultas de modelos en varias configuraciones. 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 AEM.

Ahora debería ver un extremo de GraphQL habilitado en su entorno.

En la pantalla de inicio de AEM, vaya a Herramientas > General > Editor de consultas de GraphQL.

NOTE

En, es posible que las versiones anteriores de AEM y el 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.

Pegue la siguiente consulta en el panel principal (reemplazando la lista de comentarios):

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. Agregue shortname y description 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 y description.

shortname es una propiedad simple y description es un campo de texto multilínea y la API de GraphQL nos permite elegir varios formatos para los resultados como html, markdown, json o plaintext.

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:

query allTeams {
    teamList {
        items {
            _path
            title
            shortName
            description {
                plaintext
            }
            teamMembers {
                fullName
                occupation
            }
        }
    }
}

Respuesta 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"
                ]
                }
              ]
        }
        ]
        }
    }
}

La capacidad de consultar fragmentos anidados es una práctica funcionalidad de la API de AEM GraphQL. 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.

Introduzca la siguiente consulta en la interfaz de usuario de GraphiQL:

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:

{"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 con AEM: contenido de muestra y consultas.

Mejore la consulta anterior para recuperar la imagen del perfil

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 objeto ImageRef integrado. Esto nos permite solicitar datos adicionales sobre la imagen a la que se hace referencia, como width y height.

Introduzca la siguiente consulta en el editor de GraphiQL:

query personByPath($path: String!) {
    personByPath(_path: $path) {
        item {
        fullName
        occupation
        }
    }
}

Escriba lo siguiente para las variables de consulta:

{"path": "/content/dam/my-project/en/alison-smith"}

Ejecute la consulta y observe que se devuelve el único resultado.

Introduzca la siguiente consulta en el IDE de GraphiQL:

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:

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:

Vuelva al IDE de GraphiQL y utilice el botón más + para mantener la NUEVA consulta

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:

En la pantalla de inicio de AEM, vaya a Herramientas > General > GraphQL.

Puntee en la casilla de verificación que está junto a Mi extremo del proyecto y luego pulse Publicar

En la pantalla de inicio de AEM, vaya a Herramientas > General > Editor de consultas de GraphQL

Pulse la consulta todos los equipos del panel Consultas persistentes y pulse Publicar

Repita el paso anterior para la consulta person-by-name