È possibile fare riferimento a un frammento di contenuto all’interno di un altro frammento di contenuto. Questo consente all’utente di creare modelli di dati complessi con relazioni tra i frammenti.
In questo capitolo verrà aggiornato il modello Avventura per includere un riferimento al modello Collaboratore utilizzando Riferimento frammento campo . Inoltre verrà illustrato come modificare una query GraphQL per includere campi da un modello di riferimento.
Si tratta di un tutorial in più parti e si presume che i passaggi descritti nelle parti precedenti siano stati completati.
In questo capitolo impareremo come:
Aggiorna il modello di frammento di contenuto avventura per aggiungere un riferimento al modello Collaboratore.
Apri un nuovo browser e passa a AEM.
Da Inizio AEM menu vai a Strumenti > Risorse > Modelli per frammenti di contenuto > Sito WKND.
Apri Avventura Modello per frammento di contenuto
Sotto Tipi di dati, trascina e rilascia una Riferimento frammento nel pannello principale.
Aggiorna Proprietà per questo campo:
fragmentreference
adventureContributor
/content/dam/wknd
Nome della proprietà adventureContributor
può ora essere utilizzato per fare riferimento a un frammento di contenuto da collaboratore.
Salva le modifiche apportate al modello.
Ora che il modello Frammento di contenuto avventura è stato aggiornato, possiamo modificare un frammento esistente e fare riferimento a un collaboratore. È opportuno notare che la modifica del modello Frammento di contenuto influenze eventuali frammenti di contenuto esistenti creati da esso.
Passa a Risorse > File > Sito WKND > Inglese > Avventure > Bali Surf Camp.
Fai clic su Bali Surf Camp frammento di contenuto per aprire l’Editor frammento di contenuto.
Aggiorna Collaboratore di avventura e seleziona un collaboratore facendo clic sull’icona della cartella.
Selezionare un percorso per un frammento collaboratore
Tenere presente che solo i frammenti creati con la funzione Collaboratore è possibile selezionare il modello.
Salvare le modifiche apportate al frammento.
Ripeti i passaggi precedenti per assegnare un collaboratore a avventure come Yosemite Backpack e Arrampicata su Rock del Colorado
Quindi, esegui una query per un’avventura e aggiungi proprietà nidificate del modello Contributor a cui si fa riferimento. Useremo lo strumento GraphiQL per verificare rapidamente la sintassi della query.
Passa allo strumento GraphiQL in AEM: http://localhost:4502/content/graphiql.html
Inserisci la seguente query:
{
adventureByPath(_path:"/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp") {
item {
_path
adventureTitle
adventureContributor {
fullName
occupation
pictureReference {
...on ImageRef {
_path
}
}
}
}
}
}
La query di cui sopra è per un singolo Avventura dal suo percorso. La adventureContributor
fa riferimento al modello Collaboratore e possiamo quindi richiedere le proprietà dal frammento di contenuto nidificato.
Esegui la query e ottieni un risultato simile al seguente:
{
"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"
}
}
}
}
}
}
Sperimenta con altre query come adventureList
e aggiungere proprietà per il frammento di contenuto a cui si fa riferimento in adventureContributor
.
Quindi, aggiorna le query utilizzate dall’applicazione React in modo da includere il nuovo Collaboratore e visualizza informazioni sul Collaboratore come parte della visualizzazione dei dettagli Avventura.
Apri l’app WKND GraphQL React nell’IDE.
Aprire il file src/components/AdventureDetail.js
.
Trova la funzione adventureDetailQuery(_path)
. La adventureDetailQuery(..)
funzione racchiude semplicemente una query GraphQL di filtro, che utilizza AEM <modelName>ByPath
per eseguire query su un singolo frammento di contenuto identificato dal relativo percorso JCR.
Aggiorna la query per includere informazioni sul collaboratore a cui si fa riferimento:
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
}
}
}
}
}
}
`;
}
Con questo aggiornamento vengono aggiornate le proprietà aggiuntive relative al adventureContributor
, fullName
, occupation
e pictureReference
verranno inclusi nella query.
Inspect Contributor
componente incorporato nel AdventureDetail.js
file a function Contributor(...)
. Questo componente esegue il rendering del nome, dell’occupazione e dell’immagine del collaboratore, se le proprietà esistono.
La Contributor
nel AdventureDetail(...)
return
metodo:
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} />
...
)
}
Salva le modifiche apportate al file.
Avvia React App, se non è già in esecuzione:
$ cd aem-guides-wknd-graphql/react-app
$ npm start
Passa a http://localhost:3000 e fai clic su un’avventura con un collaboratore a cui si fa riferimento. Ora puoi visualizzare le informazioni sui collaboratori elencate di seguito Itinerario:
Congratulazioni! È stato aggiornato un modello di frammento di contenuto esistente per fare riferimento a un frammento di contenuto nidificato utilizzando il Riferimento frammento campo . Hai anche imparato a modificare una query GraphQL per includere campi da un modello di riferimento.
Nel capitolo successivo, Distribuzione di produzione tramite un ambiente di pubblicazione AEM, scopri i servizi AEM Author e Publish e il modello di implementazione consigliato per le applicazioni headless. Sarà aggiornata un'applicazione esistente per utilizzare le variabili di ambiente per modificare dinamicamente un endpoint GraphQL in base all'ambiente di destinazione. Scoprirai anche come configurare AEM per la condivisione delle risorse tra origini (Cross-Origin resource sharing, CORS).