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 der Fragmentverweis -Feld. 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. Aus dem AEM Start Menünavigation zu Instrumente > Assets > Inhaltsfragmentmodelle > WKND-Site.

  3. Öffnen Sie die Abenteuer Inhaltsfragmentmodell

    Öffnen Sie das Abenteuer-Inhaltsfragmentmodell

  4. under Datentypen, ziehen Sie eine Fragmentverweis in den Hauptbereich.

    Fragmentverweisfeld hinzufügen

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

    • Rendern als - fragmentreference
    • Feldbezeichnung - Adventure Contributor
    • Eigenschaftsname - adventureContributor
    • Modelltyp - Wählen Sie die Mitarbeiter model
    • 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 Sie das Inhaltsfragmentmodell bearbeiten betrifft alle vorhandenen Inhaltsfragmente, 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 die Bali Surf Camp Inhaltsfragment , um den Inhaltsfragment-Editor zu öffnen.

  3. Aktualisieren Sie die 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 mit dem Mitarbeiter -Modell ausgewählt werden können.

  4. Speichern Sie die Änderungen am Fragment.

  5. Wiederholen Sie die obigen Schritte, um Abenteuern wie Yosemite Backpacken und Colorado Rock Climbing

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

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. Funktion suchen adventureDetailQuery(_path). Die adventureDetailQuery(..) -Funktion umbricht einfach eine GraphQL-Filterabfrage, die AEM verwendet <modelName>ByPath -Syntax, 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 erhalten Sie zusätzliche Eigenschaften zu adventureContributor, fullName, occupationund pictureReference wird in die Abfrage aufgenommen.

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

    Die Contributor -Komponente wird im Abschnitt AdventureDetail(...) return -Methode:

    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, das über einen referenzierten Mitarbeiter verfügt. Sie sollten nun die Mitarbeiter-Informationen sehen, die unten unter der Route:

    Mitwirkender in der App hinzugefügt

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben ein vorhandenes Inhaltsfragmentmodell aktualisiert, um auf ein verschachteltes Inhaltsfragment zu verweisen, indem Sie die Fragmentverweis -Feld. 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 mithilfe einer AEM-Veröffentlichungsumgebung, erfahren Sie mehr über die Autoren- und Veröffentlichungsdienste von AEM 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