API GraphQL d’AEM à utiliser avec des fragments de contenu

L’API GraphQL d’Adobe Experience Manager as a Cloud Service (AEM) utilisée avec des fragments de contenu repose principalement sur l’API open source standard GraphQL.

L’utilisation de l’API GraphQL dans AEM permet la diffusion efficace de fragments de contenu aux clients JavaScript dans les implémentations CMS découplées :

• en évitant les demandes d’API itératives comme avec REST ;
• en veillant à ce que la diffusion soit limitée aux exigences spécifiques ;
• Permet la diffusion en bloc de ce qui est exactement nécessaire pour le rendu en tant que réponse à une seule requête d'API.

L’API GraphQL

GraphQL est :

• « …un langage de requête pour les API et un environnement d’exécution pour répondre à ces requêtes avec vos données existantes. GraphQL fournit une description complète et compréhensible des données de votre API, permet aux clients de demander exactement ce dont ils ont besoin et rien de plus, facilite l’évolution des API au fil du temps et donne accès à de puissants outils de développement. ».

  Voir GraphQL.org

• « …une spécification ouverte pour une couche d’API flexible. Placez GraphQL sur vos back-ends existants pour créer des produits plus rapidement que jamais… ».

  Voir Explore GraphQL.

• "…un langage et une spécification de requête de données développé en interne par Facebook en 2012 avant d'être publiquement ouvert en 2015. C’est une alternative aux architectures basées sur REST destinée à accroître la productivité des développeurs et à réduire les quantités de données transférées. GraphQL est utilisé en production par des centaines d'organisations de toutes tailles…"

  Voir GraphQL Foundation.

Pour plus d’informations sur l’API GraphQL, voir les sections suivantes (parmi de nombreuses autres ressources) :

• Sur graphql.org :

  • Présentation de GraphQL

  • La spécification GraphQL

• Sur graphql.com :

  • Guides

  • Tutoriels

  • Études de cas

La mise en œuvre GraphQL pour AEM repose sur la bibliothèque Java GraphQL standard. Voir :

• graphQL.org - Java

• GraphQL Java sur GitHub

Terminologie GraphQL

GraphQL utilise les éléments suivants :

• Requêtes

• Schémas et types :

  • Les schémas sont générés par AEM en fonction des modèles de fragment de contenu.
  • A l’aide de vos schémas, GraphQL présente les types et les opérations autorisés pour l’implémentation AEM GraphQL.

• Champs

• Point de terminaison GraphQL

  • Chemin d’accès dans AEM qui répond aux requêtes GraphQL et permet d’accéder aux schémas GraphQL.

  • Voir Activation de votre point de terminaison GraphQL pour plus de détails.

Voir la Présentation de GraphQL (GraphQL.org) pour des détails complets, y compris les Bonnes pratiques.

Types de requêtes GraphQL

Avec GraphQL, vous pouvez exécuter des requêtes pour renvoyer l'un ou l'autre des éléments suivants :

• Une entrée unique

• A liste des entrées

GraphQL pour le point de terminaison AEM

Le point d’entrée est le chemin utilisé pour accéder à GraphQL pour AEM. Avec ce chemin, vous (ou votre application) pouvez :

• accéder au schéma GraphQL ;
• envoyer vos requêtes GraphQL ;
• recevoir les réponses (à vos requêtes GraphQL).

Le chemin d’accès au référentiel de GraphQL pour AEM point de terminaison est :

/content/cq:graphql/global/endpoint

Votre application peut utiliser le chemin d’accès suivant dans l’URL de demande :

/content/_cq_graphql/global/endpoint.json

Pour activer le point de terminaison pour GraphQL pour AEM, vous devez :

• Activation de votre point de terminaison GraphQL
• Exécution de configurations supplémentaires

Activation de votre point de terminaison GraphQL

Pour activer les requêtes GraphQL dans AEM, créez un point de terminaison à /content/cq:graphql/global/endpoint :

• Les noeuds cq:graphql et global doivent être de type sling:Folder.
• Le noeud endpoint doit être de type nt:unstructured et contenir sling:resourceType de graphql/sites/components/endpoint.

Autres configurations pour le point de terminaison GraphQL

Des configurations supplémentaires sont requises :

• Dispatcher:
  • Pour autoriser les URL requises
  • Obligatoire
• URL Vanity:
  • Pour allouer une URL simplifiée pour le point de terminaison
  • Facultatif
• Configuration OSGi:
  • Configuration de la servlet GraphQL :
    • Gère les requêtes au point de terminaison
    • Le nom de la configuration est org.apache.sling.graphql.core.GraphQLServlet. Il doit être fourni en tant que configuration d’usine OSGi.
    • sling.servlet.extensions doit être définie sur [json]
    • sling.servlet.methods doit être définie sur [GET,POST]
    • sling.servlet.resourceTypes doit être définie sur [graphql/sites/components/endpoint]
    • Obligatoire
  • Configuration du servlet schéma :
    • Crée le schéma GraphQL
    • Le nom de la configuration est com.adobe.aem.graphql.sites.adapters.SlingSchemaServlet. Il doit être fourni en tant que configuration d’usine OSGi.
    • sling.servlet.extensions doit être définie sur [GQLschema]
    • sling.servlet.methods doit être définie sur [GET]
    • sling.servlet.resourceTypes doit être définie sur [graphql/sites/components/endpoint]
    • Obligatoire
  • Configuration CSRF :
    • Protection de sécurité du point de terminaison
    • Le nom de la configuration est com.adobe.granite.csrf.impl.CSRFFilter
    • Ajouter /content/cq:graphql/global/endpoint à la liste existante des chemins exclus (filter.excluded.paths)
    • Obligatoire

Packages pris en charge

Pour simplifier la configuration d’un point de terminaison GraphQL, l’Adobe fournit le package Exemple de projet GraphQL.

Cette archive contient à la fois la configuration supplémentaire requise et le point de terminaison GraphQL. S'il est installé sur une instance AEM ordinaire, il expose un point de terminaison GraphQL entièrement fonctionnel à /content/cq:graphql/global/endpoint.

Ce paquet est destiné à être un plan d'ensemble pour vos propres projets GraphQL. Consultez le package README pour plus d'informations sur l'utilisation du package.

Si vous préférez créer manuellement la configuration requise, Adobe fournit également un package de contenu GraphQL Endpoint Content dédié. Ce package de contenu contient uniquement le point de terminaison GraphQL, sans aucune configuration.

Interface GraphiQL

Une implémentation de l'interface standard GraphiQL est disponible pour une utilisation avec AEM GraphQL. Il peut être installé avec AEM.

Cette interface vous permet de saisir directement et de tester les requêtes.

Par exemple :

• http://localhost:4502/content/graphiql.html

Vous disposez de fonctionnalités telles que la mise en surbrillance de la syntaxe, la saisie semi-automatique et la suggestion automatique, ainsi qu’un historique et une documentation en ligne :

Installation de l'interface AEM GraphiQL

L'interface utilisateur de GraphiQL peut être installée sur AEM avec un package dédié : le package GraphiQL Content Package v0.0.4.

Cas d’utilisation pour les environnements de création et de publication

Les cas d’utilisation peuvent dépendre du type d’environnement AEM as a Cloud Service :

• Environnement de publication, utilisé pour :

  • Réaliser des requête de données pour l’application JS (cas d’utilisation standard)

• Environnement de création, utilisé pour :

  • Réaliser des requêtes de données à des fins de gestion de contenu :
    • GraphQL dans AEM as a Cloud Service est actuellement une API en lecture seule.
    • L’API REST peut être utilisée pour les opérations CR(u)D.

Autorisations

Les autorisations sont celles requises pour accéder aux ressources.

Création de schémas

GraphQL est une API dans laquelle les données doivent être clairement structurées et organisées par type.

La spécification GraphQL fournit une série de directives sur la création d’une API robuste pour interroger les données sur une certaine instance. Un client doit pour cela récupérer le Schéma, qui contient tous les types nécessaires pour une requête.

Pour les fragments de contenu, les schémas GraphQL (structure et types) sont basés sur Activé Modèles de fragments de contenu et leurs types de données.

Par exemple, si un utilisateur a créé un modèle de fragment de contenu nommé Article, AEM génère l’objet article de type ArticleModel. Les champs de ce type correspondent aux champs et aux types de données définis dans le modèle.

1. Un modèle de fragment de contenu :

   

2. Schéma GraphQL correspondant (sortie de la documentation automatique GraphiQL) :
   

   Cela montre que le type généré ArticleModel contient plusieurs champs.

   • Trois d’entre eux ont été contrôlés par l’utilisateur : author, main et referencearticle.

   • Les autres champs ont été ajoutés automatiquement par AEM et représentent des méthodes utiles pour fournir des informations sur un certain fragment de contenu ; dans cet exemple, _path, _metadata et _variations. Ces champs d'assistance sont marqués par un _ précédent pour distinguer ce qui a été défini par l'utilisateur de ce qui a été généré automatiquement.

3. Après qu’un utilisateur a créé un fragment de contenu reposant sur le modèle d’article, il peut être interrogé via GraphQL. Vous trouverez des exemples à la section Exemples de Requêtes (basée sur un modèle de structure de fragment de contenu à utiliser avec GraphQL).

Dans GraphQL pour AEM, le schéma est flexible. Cela signifie qu’il est généré automatiquement à chaque fois qu’un modèle de fragment de contenu est créé, mis à jour ou supprimé. Les caches de schémas de données sont également actualisés lorsque vous mettez à jour un modèle de fragment de contenu.

Le service Sites GraphQL écoute (en arrière-plan) toutes les modifications apportées à un modèle de fragment de contenu. Lorsque des mises à jour sont détectées, seule cette partie du schéma est régénérée. Cette optimisation permet de gagner du temps et de garantir la stabilité.

Par exemple, si vous :

1. Installez un package contenant Content-Fragment-Model-1 et Content-Fragment-Model-2 :

   1. Les types GraphQL pour Model-1 et Model-2 seront générés.

2. Puis modifiez Content-Fragment-Model-2 :

   1. Seul le type Model-2 GraphQL sera mis à jour.

   2. Alors que Model-1 restera le même.

Le schéma est desservi par le même point d’entrée que les requêtes GraphQL, le client gérant le fait que le schéma est appelé avec l’extension GQLschema. Par exemple, l’exécution d’une requête GET simple sur /content/cq:graphql/global/endpoint.GQLschema entraîne la sortie du schéma avec le type de contenu : text/x-graphql-schema;charset=iso-8859-1.

Champs

Le schéma comporte des champs individuels de deux catégories de base :

• Champs que vous générez.

  Une sélection de types de champs est utilisée pour créer des champs en fonction de la configuration du modèle de fragment de contenu. Les noms des champs proviennent du champ Nom de la propriété du Type de données.

  • Il faut également tenir compte de la propriété Rendre comme, car les utilisateurs peuvent configurer certains types de données, par exemple comme une seule ligne de texte ou avec plusieurs champs.

• GraphQL pour AEM génère également un certain nombre de champs d’assistance.

  Ils servent à identifier un fragment de contenu ou à obtenir plus d’informations sur un fragment.

Types de champs

GraphQL pour AEM prend en charge une liste de types. Tous les types de données de modèles de fragments de contenu pris en charge et les types GraphQL correspondants sont représentés :

Modèle de fragment de contenu – Type de données	Type GraphQL	sa description ;
Une seule ligne de texte	Chaîne, [Chaîne]	Utilisé pour les chaînes simples telles que les noms d’auteurs, les noms d’emplacements, etc…
Plusieurs lignes de texte	Chaîne	Utilisé pour générer du texte, tel que le corps d’un article
Nombre	Flottant, [Flottant]	Utilisé pour afficher le nombre à virgule flottante et les nombres réguliers
Booléen	Booléen	Utilisé pour afficher les cases à cocher → simples instructions vrai/faux
Date et heure	Calendrier	Utilisé pour afficher la date et l’heure au format ISO 8086
Énumération	Chaîne	Utilisé pour afficher une option à partir d’une liste d’options définies lors de la création du modèle
Balises	[Chaîne]	Utilisé pour afficher une liste de chaînes représentant les balises utilisées dans AEM
Référence de contenu	Chaîne	Utilisé pour afficher le chemin vers une autre ressource dans AEM
Référence du fragment	Un type de modèle	Utilisé pour référencer un autre fragment de contenu d’un certain type de modèle, défini lors de la création du modèle

Champs d’assistance

Outre les types de données des champs générés par l’utilisateur, GraphQL pour AEM génère également un certain nombre de champs d’assistance afin de faciliter l’identification d’un fragment de contenu ou de fournir des informations supplémentaires sur un fragment de contenu.

Chemin

Le champ de chemin est utilisé comme identificateur dans GraphQL. Il représente le chemin d’accès de la ressource de fragment de contenu dans le référentiel AEM. Nous l’avons choisi comme identificateur d’un fragment de contenu, car il :

• est unique dans AEM ;
• peut facilement être récupéré.

Le code suivant affiche les chemins de tous les fragments de contenu créés à partir du modèle de fragment de contenu Person.

{
  personList {
    items {
      _path
    }
  }
}

Pour récupérer un fragment de contenu unique d’un type spécifique, vous devez commencer par déterminer son chemin d’accès. par exemple :

{
  personByPath(_path: "/content/dam/path/to/fragment/john-doe") {
    item {
      _path
      firstName
      name
    }
  }
}

Voir Exemple de Requête - Un fragment de ville spécifique unique.

Métadonnées

Par le biais de GraphQL, AEM expose également les métadonnées d’un fragment de contenu. Les métadonnées sont les informations qui décrivent un fragment de contenu, comme le titre d’un fragment de contenu, le chemin d’accès à la miniature, la description d’un fragment de contenu, la date de création, etc.

Les métadonnées étant générées par l’éditeur de schémas et n’ayant donc pas de structure spécifique, le type TypedMetaData GraphQL a été implémenté pour exposer les métadonnées d’un fragment de contenu. TypedMetaData expose les informations regroupées selon les types scalaires suivants :

Champ
stringMetadata:[StringMetadata]!
stringArrayMetadata:[StringArrayMetadata]!
intMetadata:[IntMetadata]!
intArrayMetadata:[IntArrayMetadata]!
floatMetadata:[FloatMetadata]!
floatArrayMetadata:[FloatArrayMetadata]!
booleanMetadata:[BooleanMetadata]!
booleanArrayMetadata:[booleanArrayMetadata]!
calendarMetadata:[CalendarMetadata]!
calendarArrayMetadata:[CalendarArrayMetadata]!

Chaque type scalaire représente soit une paire nom-valeur unique, soit un tableau de paires nom-valeur, où la valeur d’une paire est du type dans lequel elle a été regroupée.

Par exemple, si vous souhaitez récupérer le titre d’un fragment de contenu, nous savons que cette propriété est une propriété Chaîne et recherchons donc toutes les métadonnées Chaîne :

Pour rechercher des métadonnées :

{
  personByPath(_path: "/content/dam/path/to/fragment/john-doe") {
    item {
      _path
      _metadata {
        stringMetadata {
          name
          value
        }
      }
    }
  }
}

Vous pouvez afficher tous les types GraphQL de métadonnées si vous affichez le schéma GraphQL généré. Tous les types de modèle ont le même TypedMetaData.

Voir Modèle de recherche de métadonnées – Répertorier les métadonnées des prix intitulés GB.

Variations

Le champ _variations a été implémenté pour simplifier la recherche de variations d’un fragment de contenu. Par exemple :

{
  personByPath(_path: "/content/dam/path/to/fragment/john-doe") {
    item {
      _variations
    }
  }
}

Voir Modèle de requête – Toutes les villes avec une variante nommée.

Variables GraphQL

GraphQL permet de placer des variables dans la requête. Pour plus d’informations, voir la documentation GraphQL pour GraphiQL.

Par exemple, pour obtenir tous les fragments de contenu de type Article présentant une variation spécifique, vous pouvez spécifier la variable variation dans GraphiQL.

### query
query GetArticlesByVariation($variation: String!) {
    articleList(variation: $variation) {
        items {
            _path
            author
        }
    }
}
 
### in query variables
{
    "variation": "uk"
}

Directives GraphQL

Dans GraphQL, il est possible de modifier la requête en fonction de variables, nommées directives GraphQL.

Par exemple, vous pouvez inclure ici le champ adventurePrice dans une requête pour tous les AdventureModels, en fonction d’une variable includePrice.

### query
query GetAdventureByType($includePrice: Boolean!) {
  adventureList {
    items {
      adventureTitle
      adventurePrice @include(if: $includePrice)
    }
  }
}
 
### in query variables
{
    "includePrice": true
}

Filtrage

Vous pouvez également utiliser le filtrage dans vos requêtes GraphQL pour renvoyer des données spécifiques.

Le filtrage utilise une syntaxe basée sur des expressions et des opérateurs logiques.

Par exemple, la requête (de base) suivante filtres toutes les personnes dont le nom est Jobs ou Smith :

query {
  personList(filter: {
    name: {
      _logOp: OR
      _expressions: [
        {
          value: "Jobs"
        },
        {
          value: "Smith"
        }
      ]
    }
  }) {
    items {
      name
      firstName
    }
  }
}

Pour d'autres exemples, voir :

• détails des extensions GraphQL pour AEM

• Modèles de requêtes utilisant ce modèle de contenu et de structure

  • Et l'exemple de contenu et de structure préparé pour être utilisé dans des exemples de requêtes

• Modèles de requêtes basées sur le projet WKND

Requête du point d’entrée GraphQL à partir d’un site Web externe

Pour accéder au point de terminaison GraphQL à partir d’un site Web externe, vous devez configurer les éléments suivants :

• Filtre CORS
• Filtre de parrain

Filtre CORS

Pour accéder au point de terminaison GraphQL, une stratégie CORS doit être configurée dans le référentiel Git du client. Pour ce faire, vous devez ajouter un fichier de configuration CORS OSGi approprié pour les points de terminaison souhaités.

Cette configuration doit spécifier une origine de site Web approuvée alloworigin ou alloworiginregexp pour laquelle l'accès doit être accordé.

Par exemple, pour accorder l’accès au point de terminaison GraphQL pour https://my.domain, vous pouvez utiliser :

{
  "supportscredentials":true,
  "supportedmethods":[
    "GET",
    "HEAD",
    "POST"
  ],
  "exposedheaders":[
    ""
  ],
  "alloworigin":[
    "https://my.domain"
  ],
  "maxage:Integer":1800,
  "alloworiginregexp":[
    ""
  ],
  "supportedheaders":[
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers"
  ],
  "allowedpaths":[
    "/content/_cq_graphql/global/endpoint.json"
  ]
}

Si vous avez configuré un chemin d'accès à la vanité pour le point de terminaison, vous pouvez également l'utiliser dans allowedpaths.

Filtre de parrain

Outre la configuration CORS, un filtre de Parrain doit être configuré pour autoriser l’accès à partir d’hôtes tiers.

Pour ce faire, ajoutez un fichier de configuration de filtre de Parrain OSGi approprié qui :

• spécifie un nom d'hôte de site Web approuvé ; soit allow.hosts, soit allow.hosts.regexp,
• accorde l'accès pour ce nom d'hôte.

Par exemple, pour accorder l’accès aux requêtes avec le Parrain my.domain, vous pouvez :

{
    "allow.empty":false,
    "allow.hosts":[
      "my.domain"
    ],
    "allow.hosts.regexp":[
      ""
    ],
    "filter.methods":[
      "POST",
      "PUT",
      "DELETE",
      "COPY",
      "MOVE"
    ],
    "exclude.agents.regexp":[
      ""
    ]
}

Authentification

Voir Authentification pour les Requêtes GraphQL d'AEM distantes sur les fragments de contenu.

FAQ

Questions soulevées :

1. Q : « En quoi l’API GraphQL pour AEM est-elle différente de l’API Query Builder ? »

   • R : « L’API GraphQL d’AEM offre un contrôle total sur la sortie JSON et est une norme du secteur pour les requêtes de contenu.
     AEM prévoit d’investir dans l’API GraphQL d’AEM. »

Tutoriel – Prise en main d’AEM découplé et de GraphQL

Vous cherchez un tutoriel pratique ? Consultez le tutoriel complet Prise en main d’AEM découplé et de GraphQL illustrant comment créer et exposer du contenu à l’aide des API GraphQL d’AEM et consommé par une application externe, dans un scénario CMS découplé.