GraphQL avec Headless CMS (AEMaaCS)

Qu’est-ce qu’un CMS sans tête ?

Le CMS se compose de la tête et du corps. Le corps est l’endroit où contenu est stocké et la tête est là où il est présenté. Dans Headless CMS, le corps reste constant, c’est-à-dire que dans notre cas, ce sera AEM mais il n’y a pas de tête, ce qui signifie que nous pouvons décider de la tête par nous-mêmes. Cela ne signifie pas que vous ne voulez pas ou n’avez pas besoin d’une tête (présentation), c’est que vous pouvez choisir à quelle(s) tête(s) vous envoyez votre corps (contenu). Cela pourrait être un ou plusieurs.

Avantages du CMS sans tête

L’utilisation d’un CMS sans tête présente de nombreux avantages. Si vous bénéficiez des points ci-dessous, vous voudrez peut-être envisager de l’utiliser :

1. La tête (présentation) peut être décidée librement.
2. Peut utiliser des technologies qui ne facilitent pas l’édition des fonctionnalités de contenu.
3. Les développeurs de contenu ne se soucient pas de la couche de présentation et vice versa.
4. Portée plus large : vous pouvez présenter votre contenu sur différentes plateformes qui, en retour, ciblent un public plus large.
5. Sécurité : Comme le contenu et la présentation sont sur des plateformes différentes, l’accès à ceux-ci peut être bien géré et séparé
6. Plus de revenus si vous monétisez votre contenu.
7. Vous permet de créer une pile technologique qui peut facilement et rapidement s’adapter aux futures demandes d’expérience numérique.

Qu’est-ce que GraphQL

GraphQL est un langage de requête et de manipulation pour les API. GraphQL est un langage de requête et un environnement d’exécution côté serveur pour les API qui donne la priorité à donner aux clients exactement les données qu’ils demandent et rien de plus.

Voici quelques-unes des requêtes de base :

Configuration pour activer GraphQL sur AEMCaaS

Assurez-vous d’avoir effectué les configurations ci-dessous afin de consommer GraphQL :

1. Allez dans Outils → Général → Navigateur de configuration → Ouvrir les propriétés de votre projet. Activez les modèles de fragments de contenu et les requêtes persistantes GraphQL.
   
   
2. Allez dans Outils → Général → GraphQl.
   Créez un nouveau point de terminaison. Donnez n’importe quel nom et sélectionnez votre projet pour lequel vous avez fait la configuration à l’étape précédente. Après la création, vous verrez le point de terminaison que vous utiliserez pour les connexions.

3. Vous devez également allow le point de terminaison dans la configuration du filtre CSRF. Comme sur AEMaaCS vous devez écrire toutes vos configs dans votre code. Ci-dessous la config :

Création de fragments de contenu

GraphQL fonctionne uniquement avec des fragments de contenu dans AEM. Pour en créer un, veuillez suivre les étapes ci-dessous :

1. Accédez à Outils → Actifs → Modèles de fragments de contenu (si vous n’avez pas de modèles de fragments de contenu ici, cela signifie que votre instance n’est pas un sdk cloud. Vous pouvez le trouver sous Outils → Général).
   
2. Créez un nouveau modèle. Ouvrez le modèle en mode éditeur. Vous pouvez faire glisser les types de données du côté droit vers le volet de l’éditeur. Vous pouvez sélectionner différentes propriétés telles que l’étiquette, l’espace réservé, la valeur par défaut, la longueur maximale, obligatoire, unique, traduisible, la validation, le message d’erreur, la description, etc.
   
   
3. Une fois que vous avez fini de créer votre modèle, allez dans Navigation → Actifs → Fichiers → Dossier de votre projet. Ouvrez les propriétés du dossier du projet et autorisez votre modèle dans les stratégies.

   
4. Créez un fragment de contenu à l’aide de votre modèle de fragment de contenu.

Tester les requêtes GraphQL

Vous êtes maintenant prêt à utiliser GraphQL pour interagir avec AEM. Mais nous devrions d’abord le tester à l’aide de l’éditeur de requêtes GraphQL. Accédez à Outils → Général → Éditeur de requête GraphQL (GQE). Si vous ne voyez pas l’option ici, vous devez installer le package GraphiQL à partir du centre logiciel. Mais je recommanderais fortement d’avoir une instance de sdk cloud car le GQE fourni avec le sdk cloud vous offre la possibilité d’enregistrer et d’accéder facilement aux requêtes persistantes. Néanmoins, quelle que soit votre instance, toutes les requêtes persistantes sont enregistrées dans le dossier de configuration de votre projet, comme : /conf/ttn-cart-products/settings/graphql/persistentQueries

Sur l’écran GQE en haut à droite de l’écran, vous pouvez sélectionner le point de terminaison pour lequel vous souhaitez écrire des requêtes.

Si vous obtenez une erreur, assurez-vous d’avoir effectué toutes les étapes de la section de configuration ci-dessus.

Afin de transmettre les paramètres de requête, vous pouvez utiliser la section Variables de requête

Pour accéder à cet AEM extérieur, vous pouvez obtenir la requête curl des requêtes que vous créez dans GQE et les implémenter à l’aide de toute autre technologie.

Références

• https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/journeys/developer/overview.html?lang=en
• https://www.sanity.io/blog/headless-cms-explained
• GraphQL : https://www.youtube.com/watch?v=ZQL7tL2S0oQ