Im vorherigen Kapitel haben Sie mit dem GraphiQL Explorer persistente Abfragen erstellt und aktualisiert.
Dieses Kapitel führt Sie durch die Schritte, die zur Integration der persistenten Abfragen in die WKND-Client-Anwendung (auch WKND App genannt) mithilfe von HTTP-GET in bestehende Anwendungen erforderlich sind. React-Komponenten. Es bietet außerdem eine optionale Herausforderung, Ihre AEM Headless-Lernprozesse anzuwenden und das Know-how zu programmieren, um die WKND-Client-Anwendung zu verbessern.
Dieses Dokument ist Teil eines mehrteiligen Tutorials. Bevor Sie mit diesem Kapitel fortfahren, vergewissern Sie sich bitte, dass die vorherigen Kapitel abgeschlossen sind. Die WKND-Clientanwendung stellt eine Verbindung zu AEM Veröffentlichungsdienst her. Daher ist es wichtig, dass Sie hat Folgendes in den AEM Veröffentlichungsdienst veröffentlicht.
Die IDE-Screenshots in diesem Kapitel stammen von Visual Studio-Code
Es ist ein Lösungspaket verfügbar, das installiert wird, das die Schritte in der AEM Benutzeroberfläche für die Kapitel 1-4 abschließt. Dieses Paket ist nicht erforderlich wenn die vorherigen Kapitel abgeschlossen sind.
In diesem Tutorial erfahren Sie, wie Sie die Anforderungen für persistente Abfragen mithilfe der AEM Headless-Client für JavaScript.
Um das Tutorial zu beschleunigen, wird eine Starter-React-JS-App bereitgestellt.
Klonen Sie die adobe/aem-guides-wknd-graphql repository:
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Bearbeiten Sie die aem-guides-wknd-graphql/advanced-tutorial/.env.development
Datei und Set REACT_APP_HOST_URI
, um auf Ihren Ziel-AEM-Veröffentlichungsdienst zu verweisen.
Aktualisieren Sie die Authentifizierungsmethode, wenn Sie eine Verbindung zu einer Autoreninstanz herstellen.
# Server namespace
REACT_APP_HOST_URI=https://publish-pxx-eyy.adobeaemcloud.com
#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
REACT_APP_AUTH_METHOD=
# For Bearer auth, use DEV token (dev-token) from Cloud console
REACT_APP_DEV_TOKEN=
# For Service toke auth, provide path to service token file (download file from Cloud console)
REACT_APP_SERVICE_TOKEN=auth/service-token.json
# For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)
REACT_APP_BASIC_AUTH_USER=
REACT_APP_BASIC_AUTH_PASS=
Die obigen Anweisungen sind, die React-App mit der AEM-Veröffentlichungsdienst, jedoch um eine Verbindung mit der AEM-Autorendienst ein lokales Entwicklungstoken für Ihre Ziel-AEM as a Cloud Service Umgebung abrufen.
Es ist auch möglich, die App mit einem lokale Autoreninstanz mit dem AEMaaCS-SDK einfache Authentifizierung verwenden.
Öffnen Sie ein Terminal und führen Sie die Befehle aus:
$ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start
Ein neues Browser-Fenster sollte in http://localhost:3000
Tippen Campingplatz > Yosemite Backpacken , um die Yosemite Backpacking Abenteuerdetails zu sehen.
Öffnen Sie die Entwicklertools des Browsers und überprüfen Sie die XHR
Anfrage
Sie sollten GET
Anforderungen an den GraphQL-Endpunkt mit dem Projektnamen config (wknd-shared
), persistenter Abfragename (adventure-by-slug
), Variablenname (slug
), Wert (yosemite-backpacking
) und Sonderzeichen-Kodierungen.
Wenn Sie sich fragen, warum die GraphQL-API-Anfrage gegen die http://localhost:3000
und NICHT in Bezug auf die AEM Publish Service-Domäne, überprüfen Sie Unterhalb des aus dem Grundlegenden Tutorial.
Im Grundlegendes Tutorial - Erstellen einer React-App, die AEM GraphQL-APIs verwendet Schritt hatten wir einige Schlüsseldateien überprüft und erweitert, um praktische Kenntnisse zu erhalten. Bevor Sie die WKND-App verbessern, überprüfen Sie die Schlüsseldateien.
Adventures
React-KomponenteDie Hauptansicht der WKND React-App ist die Liste aller Abenteuer und Sie können diese Abenteuer nach Aktivitätstyp filtern, z. B. Camping, Radfahren. Diese Ansicht wird von der Adventures
-Komponente. Im Folgenden finden Sie die wichtigsten Implementierungsdetails:
Die src/components/Adventures.js
Aufrufe useAllAdventures(adventureActivity)
Hook und hier adventureActivity
-Argument ist der Aktivitätstyp.
Die useAllAdventures(adventureActivity)
Der Erweiterungspunkt wird im Abschnitt src/api/usePersistedQueries.js
-Datei. Basierend auf adventureActivity
-Wert bestimmt, welche persistente Abfrage aufgerufen werden soll. Wenn kein Nullwert angegeben wird, wird wknd-shared/adventures-by-activity
, sonst erhalten alle verfügbaren Abenteuer wknd-shared/adventures-all
.
Der Haken verwendet das Haupt fetchPersistedQuery(..)
-Funktion, die die Ausführung der Abfrage an AEMHeadless
via aemHeadlessClient.js
.
Der Erweiterungspunkt gibt auch nur die relevanten Daten aus der AEM GraphQL-Antwort zurück unter response.data?.adventureList?.items
, wodurch die Adventures
React-View-Komponenten müssen unabhängig von den übergeordneten JSON-Strukturen sein.
Bei erfolgreicher Ausführung der Abfrage wird die AdventureListItem(..)
Render-Funktion von Adventures.js
fügt HTML-Element hinzu, um die Bild, Reisedauer, Preis und Titel Informationen.
AdventureDetail
React-KomponenteDie AdventureDetail
Die React-Komponente rendert die Details des Abenteuers. Im Folgenden finden Sie die wichtigsten Implementierungsdetails:
Die src/components/AdventureDetail.js
Aufrufe useAdventureBySlug(slug)
Hook und hier slug
-Argument ist Abfrageparameter.
Wie oben, wird die useAdventureBySlug(slug)
Der Erweiterungspunkt wird im Abschnitt src/api/usePersistedQueries.js
-Datei. Sie ruft wknd-shared/adventure-by-slug
persistente Abfrage durch Delegieren an AEMHeadless
via aemHeadlessClient.js
.
Bei erfolgreicher Ausführung der Abfrage wird die AdventureDetailRender(..)
Render-Funktion von AdventureDetail.js
fügt ein HTML-Element hinzu, um die Details des Abenteuers anzuzeigen.
adventure-details-by-slug
persistente AbfrageIm vorherigen Kapitel haben wir die adventure-details-by-slug
persistente Abfrage enthält, werden zusätzliche Abenteuerinformationen bereitgestellt, z. B. location, lehrerteam und administrator. Lasst uns ersetzen adventure-by-slug
mit adventure-details-by-slug
persistente Abfrage zum Rendern dieser zusätzlichen Informationen.
Öffnen Sie src/api/usePersistedQueries.js
.
Suchen Sie die Funktion useAdventureBySlug()
und aktualisieren Sie die Abfrage als
...
// Call the AEM GraphQL persisted query named "wknd-shared/adventure-details-by-slug" with parameters
response = await fetchPersistedQuery(
"wknd-shared/adventure-details-by-slug",
queryParameters
);
...
Um weitere Abenteuerinformationen anzuzeigen, öffnen Sie src/components/AdventureDetail.js
Suchen Sie die Funktion AdventureDetailRender(..)
und aktualisieren Sie die Rückgabefunktion als
...
return (<>
<h1 className="adventure-detail-title">{title}</h1>
<div className="adventure-detail-info">
<LocationInfo {...location} />
...
<Location {...location} />
<Administrator {...administrator} />
<InstructorTeam {...instructorTeam} />
</div>
</>);
...
Definieren Sie auch die entsprechenden Renderfunktionen:
LocationInfo
function LocationInfo({name}) {
if (!name) {
return null;
}
return (
<>
<div className="adventure-detail-info-label">Location</div>
<div className="adventure-detail-info-description">{name}</div>
</>
);
}
Speicherort
function Location({ contactInfo }) {
if (!contactInfo) {
return null;
}
return (
<>
<div className='adventure-detail-location'>
<h2>Where we meet</h2>
<hr />
<div className="adventure-detail-addtional-info">Phone:{contactInfo.phone}</div>
<div className="adventure-detail-addtional-info">Email:{contactInfo.email}</div>
</div>
</>);
}
InstructorTeam
function InstructorTeam({ _metadata }) {
if (!_metadata) {
return null;
}
return (
<>
<div className='adventure-detail-team'>
<h2>Instruction Team</h2>
<hr />
<div className="adventure-detail-addtional-info">Team Name: {_metadata.stringMetadata[0].value}</div>
</div>
</>);
}
Administrator
function Administrator({ fullName, contactInfo }) {
if (!fullName || !contactInfo) {
return null;
}
return (
<>
<div className='adventure-detail-administrator'>
<h2>Administrator</h2>
<hr />
<div className="adventure-detail-addtional-info">Name: {fullName}</div>
<div className="adventure-detail-addtional-info">Phone: {contactInfo.phone}</div>
<div className="adventure-detail-addtional-info">Email: {contactInfo.email}</div>
</div>
</>);
}
Öffnen src/components/AdventureDetail.scss
und fügen Sie die folgenden Klassendefinitionen hinzu
.adventure-detail-administrator,
.adventure-detail-team,
.adventure-detail-location {
margin-top: 1em;
width: 100%;
float: right;
}
.adventure-detail-addtional-info {
padding: 10px 0px 5px 0px;
text-transform: uppercase;
}
Die aktualisierten Dateien finden Sie unter AEM Guides WKND - GraphQL Projekt, siehe Erweitertes Tutorial Abschnitt.
Nach Abschluss der oben genannten Verbesserungen sieht die WKND-App wie folgt aus und die Entwicklertools des Browsers zeigen adventure-details-by-slug
persistenter Abfrageaufruf.
Die Hauptansicht der WKND React-App ermöglicht es Ihnen, diese Abenteuer nach Aktivitätstyp wie Camping, Radfahren. Das WKND-Geschäftsteam möchte jedoch eine zusätzliche Standort Filterfunktion. Die Anforderungen sind
Herzlichen Glückwunsch! Sie haben die Integration abgeschlossen und die persistenten Abfragen in die WKND-Beispielanwendung implementiert.