Il est possible de référencer un fragment de contenu dans un autre fragment de contenu. Cela permet à un utilisateur de créer des modèles de données complexes avec des relations entre les fragments.
Dans ce chapitre, vous allez mettre à jour le modèle Adventure afin d’inclure une référence au modèle Contributeur à l’aide de la variable Référence de fragment champ . Vous apprendrez également à modifier une requête GraphQL pour inclure des champs d’un modèle référencé.
Il s’agit d’un tutoriel en plusieurs parties qui suppose que les étapes décrites dans les parties précédentes ont été terminées.
Dans ce chapitre, nous allons apprendre à :
Mettez à jour le modèle de fragment de contenu aventure pour ajouter une référence au modèle du contributeur.
Ouvrez un nouveau navigateur et accédez à AEM.
Dans la AEM Accédez à Outils > Ressources > Modèles de fragment de contenu > Site WKND.
Ouvrez le Adventure Modèle de fragment de contenu
Sous Types de données, effectuez un glisser-déposer d’un élément Référence de fragment dans le panneau principal.
Mettez à jour le Propriétés pour ce champ avec les éléments suivants :
fragmentreference
adventureContributor
/content/dam/wknd
Nom de la propriété adventureContributor
peut désormais être utilisé pour référencer un fragment de contenu du contributeur.
Enregistrez les modifications apportées au modèle.
Maintenant que le modèle de fragment de contenu aventure a été mis à jour, nous pouvons modifier un fragment existant et référencer un contributeur. Notez que la modification du modèle de fragment de contenu affecte tout fragment de contenu existant créé à partir de celui-ci.
Accédez à Ressources > Fichiers > Site WKND > Anglais > Aventures > Le camp de surf de Bali.
Cliquez dans le Le camp de surf de Bali fragment de contenu pour ouvrir l’éditeur de fragment de contenu.
Mettez à jour le Adventure Contributor et sélectionnez un contributeur en cliquant sur l’icône de dossier.
Sélection d’un chemin d’accès à un fragment de contributeur
Notez que seuls les fragments créés à l’aide de la fonction Contributeur peuvent être sélectionnés.
Enregistrez les modifications dans le fragment.
Répétez les étapes ci-dessus pour affecter un contributeur à des aventures telles que Yosemite Backpackaging et Escalade du rock au Colorado
Exécutez ensuite une requête pour une aventure et ajoutez les propriétés imbriquées du modèle Contributeur référencé. Nous utiliserons l’outil GraphiQL pour vérifier rapidement la syntaxe de la requête.
Accédez à l’outil GraphiQL dans AEM : http://localhost:4502/content/graphiql.html
Saisissez la requête suivante :
{
adventureByPath(_path:"/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp") {
item {
_path
adventureTitle
adventureContributor {
fullName
occupation
pictureReference {
...on ImageRef {
_path
}
}
}
}
}
}
La requête ci-dessus est pour une aventure unique par son chemin. Le adventureContributor
fait référence au modèle du contributeur, puis nous pouvons demander des propriétés au fragment de contenu imbriqué.
Exécutez la requête et vous devriez obtenir un résultat comme suit :
{
"data": {
"adventureByPath": {
"item": {
"_path": "/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp",
"adventureTitle": "Bali Surf Camp",
"adventureContributor": {
"fullName": "Stacey Roswells",
"occupation": "Photographer",
"pictureReference": {
"_path": "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
}
}
}
}
}
}
Testez d’autres requêtes comme adventureList
et ajoutez des propriétés pour le fragment de contenu référencé sous adventureContributor
.
Ensuite, mettez à jour les requêtes utilisées par l’application React afin d’inclure le nouveau contributeur et d’afficher les informations sur le contributeur dans la vue Détails de l’aventure.
Ouvrez l’application WKND GraphQL React dans votre IDE.
Ouvrez le fichier src/components/AdventureDetail.js
.
Recherche de la fonction adventureDetailQuery(_path)
. Le adventureDetailQuery(..)
encapsule simplement une requête GraphQL de filtrage, qui utilise AEM <modelName>ByPath
pour interroger un seul fragment de contenu identifié par son chemin JCR.
Mettez à jour la requête pour inclure des informations sur le contributeur référencé :
function adventureDetailQuery(_path) {
return `{
adventureByPath (_path: "${_path}") {
item {
_path
adventureTitle
adventureActivity
adventureType
adventurePrice
adventureTripLength
adventureGroupSize
adventureDifficulty
adventurePrice
adventurePrimaryImage {
... on ImageRef {
_path
mimeType
width
height
}
}
adventureDescription {
html
}
adventureItinerary {
html
}
adventureContributor {
fullName
occupation
pictureReference {
...on ImageRef {
_path
}
}
}
}
}
}
`;
}
Avec cette mise à jour, des propriétés supplémentaires sur la variable adventureContributor
, fullName
, occupation
, et pictureReference
sera inclus dans la requête.
Inspect Contributor
composant incorporé dans AdventureDetail.js
fichier à l’emplacement function Contributor(...)
. Ce composant affiche le nom, l’occupation et l’image du contributeur si les propriétés existent.
Le Contributor
est référencé dans la variable AdventureDetail(...)
return
method :
function AdventureDetail(props) {
...
return (
...
<h2>Itinerary</h2>
<hr />
<div className="adventure-detail-itinerary"
dangerouslySetInnerHTML={{__html: adventureData.adventureItinerary.html}}></div>
{/* Contributor component is instaniated and
is passed the adventureContributor object from the GraphQL Query results */}
<Contributer {...adventureData.adventureContributor} />
...
)
}
Enregistrez les modifications dans le fichier.
Démarrez l’application React, si elle n’est pas déjà en cours d’exécution :
$ cd aem-guides-wknd-graphql/react-app
$ npm start
Accédez à http://localhost:3000 et cliquez sur une aventure dont le contributeur est référencé. Vous devriez maintenant voir les informations du contributeur répertoriées ci-dessous : Itinéraire:
Félicitations ! Vous avez mis à jour un modèle de fragment de contenu existant afin de référencer un fragment de contenu imbriqué à l’aide de la propriété Référence de fragment champ . Vous avez également appris à modifier une requête GraphQL pour inclure des champs d’un modèle référencé.
Dans le chapitre suivant, Déploiement en production à l’aide d’un environnement de publication AEM, découvrez les services AEM Author et Publish et le modèle de déploiement recommandé pour les applications sans interface utilisateur graphique. Vous allez mettre à jour une application existante afin d’utiliser des variables d’environnement pour modifier dynamiquement un point d’entrée GraphQL en fonction de l’environnement cible. Vous apprendrez également comment configurer correctement les AEM pour le partage des ressources cross-origin (CORS).