Explorer les API GraphQL explore-graphql-apis

Depuis l’écran de démarrage d’AEM, accédez à Outils > Général > GraphQL.

Appuyez sur Créer dans le coin supérieur droit, et dans la boîte de dialogue qui s’affiche, saisissez les valeurs suivantes :

• Nom* : Point d’entrée de mon projet.
• Utilisez le schéma GraphQL fourni par … * : Mon projet.

Appuyez sur Créer pour enregistrer le point d’entrée.

Les points d’entrée GraphQL créés à partir d’une configuration de projet activent uniquement les requêtes liées aux modèles appartenant à ce projet. Dans ce cas, seules les requêtes liées aux modèles Personne et Équipe peuvent être utilisées.

Vous devriez maintenant voir un point d’entrée GraphQL activé dans votre environnement.

Depuis l’écran de démarrage AEM, accédez à Outils > Général > Éditeur de requêtes GraphQL.

Dans le coin supérieur droit, assurez-vous que le point d’entrée est défini sur Point d’entrée de mon projet.

Collez la requête suivante dans le panneau principal (en remplaçant la liste des commentaires) :

query allTeams {
  teamList {
    items {
      _path
      title
    }
  }
}

Appuyez sur la touche Lecture dans le menu supérieur pour exécuter la requête. Vous devriez voir les résultats des fragments de contenu du chapitre précédent :

Positionnez le curseur sous le texte title et saisissez Ctrl+Espace pour activer les astuces de codage. Ajoutez shortname et description à la requête.

Exécutez à nouveau la requête en appuyant sur le bouton Lecture et vous devriez voir que les résultats incluent les propriétés supplémentaires de shortname et description.

Le shortname est une propriété simple et la description est un champ de texte multiligne, et l’API GraphQL nous permet de choisir différents formats pour les résultats comme html, markdown, json, ou plaintext.

Mettez à jour la requête pour inclure la propriété teamMembers. Rappelons qu’il s’agit d’un champ de Référence de fragment au modèle Personne. Les propriétés du modèle Personne peuvent être renvoyées :

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

Réponse 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 possibilité d’interroger des fragments imbriqués est une fonctionnalité puissante de l’API GraphQL d’AEM. Dans cet exemple simple, l’imbrication ne porte que sur deux niveaux. Il est toutefois possible d’imbriquer davantage les fragments. Par exemple, s’il existait un modèle Adresse associé à une Personne, il serait possible de renvoyer les données des trois modèles avec une seule requête.

Saisissez la requête suivante dans l’interface graphique de GraphiQL :

query personByName($name:String!){
  personList(
    filter:{
      fullName:{
        _expressions:[{
          value:$name
          _operator:EQUALS
        }]
      }
    }
  ){
    items{
      _path
      fullName
      occupation
    }
  }
}

La requête ci-dessus effectue une recherche sur tous les fragments de Personne du système. Le filtre ajouté au début de la requête effectue une comparaison sur le champ name et la chaîne de variable $name.

Dans le panneau Variables de requête, saisissez ce qui suit :

{"name": "John Doe"}

Exécutez la requête, il faut s’attendre à ce que seul le fragment de contenu Personnes soit retourné avec une valeur de John Doe.

Il existe de nombreuses autres options pour filtrer et créer des requêtes complexes, voir Apprendre à utiliser GraphQL avec AEM - Exemples de contenu et de requêtes.

Améliorer la requête ci-dessus pour récupérer la photo de profil

query personByName($name:String!){
  personList(
    filter:{
      fullName:{
        _expressions:[{
          value:$name
          _operator:EQUALS
        }]
      }
    }
  ){
    items{
      _path
      fullName
      occupation
      profilePicture{
        ... on ImageRef{
          _path
          _authorUrl
          _publishUrl
          height
          width

        }
      }
    }
  }
}

La profilePicture est une référence de contenu prévue pour être une image, donc l’objet ImageRef intégré est utilisé. Cela nous permet de demander des données supplémentaires sur l’image référencée, comme la width et la height.

Saisissez la requête suivante dans l’éditeur GraphiQL :

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

Saisissez ce qui suit pour les Variables de requête  :

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

Exécutez la requête et constatez qu’un seul résultat est renvoyé.

Saisissez la requête suivante dans l’IDE GraphiQL :

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

Vérifiez que la requête fonctionne.

Appuyez ensuite sur Enregistrer sous et saisissez all-teams comme Nom de la requête.

La requête devrait être affichée sous Requêtes persistantes dans le rail de gauche.

Appuyez ensuite sur les points de suspension … à côté de la requête persistante et appuyez sur Copier l’URL pour copier le chemin d’accès dans votre presse-papiers.

Ouvrez un nouvel onglet et collez le chemin d’accès copié dans votre navigateur :

https://$YOUR-AEMasCS-INSTANCEID$.adobeaemcloud.com/graphql/execute.json/my-project/all-teams

Il devrait ressembler au chemin d’accès ci-dessus. Vous devriez voir que les résultats JSON de la requête sont renvoyés.

Décomposition de l’URL ci-dessus :

Retournez dans l’IDE GraphiQL et utilisez le bouton plus + pour conserver la NOUVELLE requête.

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
        }
      }
    }
  }
}

Enregistrez la requête sous : person-by-name.

Vous devriez avoir deux requêtes persistantes enregistrées :

À partir de l’écran de démarrage d’AEM, accédez à Outils > Général > GraphQL.

Appuyez sur la case à cocher à côté de Point d’entrée de mon projet et appuyez sur Publier.

À partir de l’écran de démarrage d’AEM, accédez à Outils > Général > Éditeur de requêtes GraphQL.

Appuyez sur la requête toutes les équipes dans le panneau des requêtes persistantes et appuyez sur Publier.

Répétez l’étape ci-dessus pour la requête person-by-name.