Erweiterte Datenmodellierung mit Fragmentverweisen

Es ist möglich, ein Inhaltsfragment aus einem anderen Inhaltsfragment zu referenzieren. Dadurch kann ein Benutzer komplexe Datenmodelle mit Beziehungen zwischen Fragmenten erstellen.

In diesem Kapitel aktualisieren Sie das Abenteuer-Modell, um mithilfe des Felds Fragmentverweis einen Verweis auf das Contributor-Modell einzufügen. Außerdem erfahren Sie, wie Sie eine GraphQL-Abfrage ändern, um Felder aus einem referenzierten Modell einzuschließen.

Voraussetzungen

Dies ist ein mehrteiliges Tutorial, und es wird davon ausgegangen, dass die in den vorherigen Teilen beschriebenen Schritte abgeschlossen wurden.

Ziele

In diesem Kapitel lernen wir Folgendes:

  • Aktualisieren eines Inhaltsfragmentmodells zur Verwendung des Fragmentverweisfelds
  • Erstellen einer GraphQL-Abfrage, die Felder aus einem referenzierten Modell zurückgibt

Fragmentverweis hinzufügen

Aktualisieren Sie das Adventure Content Fragment-Modell, um eine Referenz zum Contributor-Modell hinzuzufügen.

  1. Öffnen Sie einen neuen Browser und navigieren Sie zu AEM.

  2. Navigieren Sie im Menü AEM Start zu Tools > Assets > Inhaltsfragmentmodelle > WKND-Site.

  3. Öffnen Sie das Inhaltsfragmentmodell Adventure

    Öffnen Sie das Abenteuer-Inhaltsfragmentmodell

  4. Ziehen Sie unter Datentypen ein Feld Fragmentverweis in den Hauptbereich.

    Fragmentverweisfeld hinzufügen

  5. Aktualisieren Sie die Properties für dieses Feld mit folgenden Eigenschaften:

    • Rendern als - fragmentreference
    • Feldbezeichnung - Adventure Contributor
    • Eigenschaftsname - adventureContributor
    • Modelltyp - Wählen Sie das Modell Contributor aus.
    • Stammverzeichnis - /content/dam/wknd

    Fragmentverweiseigenschaften

    Der Eigenschaftsname adventureContributor kann jetzt verwendet werden, um auf ein Contributor Content Fragment zu verweisen.

  6. Speichern Sie die Änderungen am Modell.

Zuweisen eines Beitragenden zu einem Abenteuer

Nachdem das Abenteuer-Inhaltsfragmentmodell aktualisiert wurde, können wir ein vorhandenes Fragment bearbeiten und auf einen Mitwirkenden verweisen. Beachten Sie, dass sich die Bearbeitung des Inhaltsfragmentmodells auf alle vorhandenen Inhaltsfragmente auswirkt, die daraus erstellt wurden.

  1. Navigieren Sie zu Assets > Dateien > WKND-Site > Englisch > Abenteuer > Bali Surf Camp .

    Ordner des Bali Surf Camp

  2. Klicken Sie in das Inhaltsfragment Bali Surf Camp , um den Inhaltsfragment-Editor zu öffnen.

  3. Aktualisieren Sie das Feld Adventure Contributor und wählen Sie einen Mitarbeiter aus, indem Sie auf das Ordnersymbol klicken.

    Wählen Sie "Stacey Roswells"als Beitragenden

    Pfad zu einem Beitragsfragment auswählen

    bevölkerter Pfad zum Beitragenden

    Beachten Sie, dass nur Fragmente ausgewählt werden können, die mit dem Modell Contributor erstellt wurden.

  4. Speichern Sie die Änderungen am Fragment.

  5. Wiederholen Sie die obigen Schritte, um Abenteuern wie Yosemite Backpackaging und Colorado Rock Climbing einen Mitwirkenden zuzuweisen.

Abfragen von verschachtelten Inhaltsfragmenten mit GraphiQL

Führen Sie anschließend eine Abfrage für ein Abenteuer durch und fügen Sie verschachtelte Eigenschaften des referenzierten Contributor-Modells hinzu. Wir werden das GraphiQL-Tool verwenden, um die Syntax der Abfrage schnell zu überprüfen.

  1. Navigieren Sie in AEM zum GraphiQL-Tool: http://localhost:4502/content/graphiql.html

  2. Geben Sie die folgende Abfrage ein:

    {
      adventureByPath(_path:"/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp") {
         item {
           _path
           adventureTitle
           adventureContributor {
             fullName
             occupation
             pictureReference {
            ...on ImageRef {
              _path
            }
          }
        }
      }
     }
    }
    

    Die obige Abfrage bezieht sich auf einen einzelnen Abenteuer-Pfad. Die Eigenschaft adventureContributor verweist auf das Contributor-Modell und wir können dann Eigenschaften vom verschachtelten Inhaltsfragment anfordern.

  3. Führen Sie die Abfrage aus und Sie sollten ein Ergebnis wie das folgende erhalten:

    {
      "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. Experimentieren Sie mit anderen Abfragen wie adventureList und fügen Sie Eigenschaften für das referenzierte Inhaltsfragment unter adventureContributor hinzu.

Aktualisieren der React-App zur Anzeige von Contributor-Inhalten

Aktualisieren Sie anschließend die von der React-Anwendung verwendeten Abfragen, um den neuen Mitarbeiter aufzunehmen und Informationen über den Beitragenden im Rahmen der Detailansicht des Abenteuer anzuzeigen.

  1. Öffnen Sie die WKND GraphQL React-App in Ihrer IDE.

  2. Öffnen Sie die Datei src/components/AdventureDetail.js.

    Adventure Detail-IDE

  3. Suchen Sie die Funktion adventureDetailQuery(_path). Die Funktion adventureDetailQuery(..) bricht einfach eine GraphQL-Filterabfrage ein, die AEM <modelName>ByPath-Syntax verwendet, um ein einzelnes Inhaltsfragment abzufragen, das durch seinen JCR-Pfad identifiziert wird.

  4. Aktualisieren Sie die Abfrage, um Informationen zum referenzierten Mitarbeiter hinzuzufügen:

    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
                        }
                    }
                }
              }
           }
         }
        `;
    }
    

    Mit dieser Aktualisierung werden zusätzliche Eigenschaften zu adventureContributor, fullName, occupation und pictureReference in die Abfrage aufgenommen.

  5. Inspect die Komponente Contributor, die in die Datei AdventureDetail.js unter function Contributor(...) eingebettet ist. Diese Komponente rendert den Namen, den Beruf und das Bild des Mitwirkenden, falls die Eigenschaften vorhanden sind.

    Die Komponente Contributor wird in der Methode AdventureDetail(...) return referenziert:

    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. Speichern Sie die Änderungen in der Datei.

  7. Starten Sie die React-App, falls noch nicht ausgeführt:

    $ cd aem-guides-wknd-graphql/react-app
    $ npm start
    
  8. Navigieren Sie zu http://localhost:3000 und klicken Sie auf ein Abenteuer mit einem referenzierten Mitarbeiter. Sie sollten nun die Mitarbeiter-Informationen sehen, die unter Itinerary aufgelistet sind:

    Mitwirkender in der App hinzugefügt

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben ein vorhandenes Inhaltsfragmentmodell mit dem Feld Fragmentverweis aktualisiert, um auf ein verschachteltes Inhaltsfragment zu verweisen. Außerdem haben Sie erfahren, wie Sie eine GraphQL-Abfrage ändern, um Felder aus einem referenzierten Modell einzuschließen.

Nächste Schritte

Im nächsten Kapitel Produktionsbereitstellung mit einer AEM-Veröffentlichungsumgebung erfahren Sie mehr über AEM-Autoren- und Veröffentlichungsdienste und das empfohlene Bereitstellungsmuster für Headless-Anwendungen. Sie aktualisieren eine vorhandene Anwendung, um Umgebungsvariablen zu verwenden, um einen GraphQL-Endpunkt basierend auf der Zielumgebung dynamisch zu ändern. Außerdem erfahren Sie, wie Sie AEM für Cross-Origin Resource Sharing (CORS) ordnungsgemäß konfigurieren.

Auf dieser Seite