Modellazione dati avanzata con riferimenti a frammenti

È 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 il campo Riferimento frammento . Inoltre verrà illustrato come modificare una query GraphQL per includere campi da un modello di riferimento.

Prerequisiti

Si tratta di un tutorial in più parti e si presume che i passaggi descritti nelle parti precedenti siano stati completati.

Obiettivi

In questo capitolo impareremo come:

• Aggiornare un modello di frammento di contenuto per utilizzare il campo Riferimento frammento
• Crea una query GraphQL che restituisce campi da un modello di riferimento

Aggiungere un riferimento a un frammento

Aggiorna il modello di frammento di contenuto avventura per aggiungere un riferimento al modello Collaboratore.

1. Apri un nuovo browser e passa a AEM.

2. Dal menu AEM Avvio vai a Strumenti > Risorse > Modelli di frammenti di contenuto > Sito WKND.

3. Apri il modello di frammento di contenuto Avventura

   

4. In Tipi di dati, trascina e rilascia un campo Riferimento frammento nel pannello principale.

   

5. Aggiorna Proprietà per questo campo con quanto segue:

   • Rendering come - fragmentreference
   • Etichetta campo - Collaboratore avventura
   • Nome proprietà - adventureContributor
   • Tipo di modello - Seleziona il modello Collaboratore
   • Percorso directory principale - /content/dam/wknd

   

   È ora possibile utilizzare il nome della proprietà adventureContributor per fare riferimento a un frammento di contenuto per collaboratori.

6. Salva le modifiche apportate al modello.

Assegnare un collaboratore a un’avventura

Ora che il modello Frammento di contenuto avventura è stato aggiornato, possiamo modificare un frammento esistente e fare riferimento a un collaboratore. La modifica del modello Frammento di contenuto ha effetto su tutti i frammenti di contenuto esistenti creati da esso.

1. Passa a Risorse > File > Sito WKND > Inglese > Avventure > Campo di surf di Bali.

   

2. Fai clic sul frammento di contenuto Bali Surf Camp per aprire l’Editor frammento di contenuto.

3. Aggiorna il campo Collaboratore avventura e seleziona un Collaboratore facendo clic sull’icona della cartella.

   

   Selezionare un percorso per un frammento collaboratore

   

   È possibile selezionare solo i frammenti creati utilizzando il modello Collaboratore.

4. Salvare le modifiche apportate al frammento.

5. Ripeti i passaggi precedenti per assegnare un collaboratore a avventure come Yosemite Backpackaging e Colorado Rock Climbing

Query di frammento di contenuto nidificato con GraphiQL

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.

1. Passa allo strumento GraphiQL in AEM: http://localhost:4502/content/graphiql.html

2. 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 proprietà adventureContributor fa riferimento al modello Collaboratore e possiamo quindi richiedere le proprietà dal frammento di contenuto nidificato.

3. 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"
                   }
               }
           }
        }
     }
   }
   

4. Sperimenta con altre query come adventureList e aggiungi proprietà per il frammento di contenuto a cui si fa riferimento in adventureContributor.

Aggiornare l’app React per visualizzare il contenuto del collaboratore

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.

1. Apri l’app WKND GraphQL React nell’IDE.

2. Aprire il file src/components/AdventureDetail.js.

   

3. Trova la funzione adventureDetailQuery(_path). La funzione adventureDetailQuery(..) racchiude semplicemente una query GraphQL con filtro, che utilizza AEM sintassi <modelName>ByPath per eseguire query su un singolo frammento di contenuto identificato dal relativo percorso JCR.

4. 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 verranno incluse ulteriori proprietà relative a adventureContributor, fullName, occupation e pictureReference nella query.

5. Inspect il componente Contributor incorporato nel file AdventureDetail.js in function Contributor(...). Questo componente esegue il rendering del nome, dell’occupazione e dell’immagine del collaboratore, se le proprietà esistono.

   Il componente Contributor è indicato nel metodo AdventureDetail(...) return :

   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} />
           ...
       )
   }
   

6. Salva le modifiche apportate al file.

7. Avvia React App, se non è già in esecuzione:

   $ cd aem-guides-wknd-graphql/react-app
   $ npm start
   

8. Passa a http://localhost:3000 e fai clic su un’avventura con un collaboratore a cui si fa riferimento. Le informazioni per i collaboratori sono ora elencate di seguito l’ Itinerario:

   

Congratulazioni!

Congratulazioni! È stato aggiornato un modello di frammento di contenuto esistente per fare riferimento a un frammento di contenuto nidificato utilizzando il campo Riferimento frammento . Hai anche imparato a modificare una query GraphQL per includere campi da un modello di riferimento.

Passaggi successivi

Nel capitolo successivo, Distribuzione di produzione utilizzando un ambiente di pubblicazione AEM, scopri i servizi di authoring e pubblicazione AEM 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).