Nel capitolo precedente, hai creato e aggiornato query persistenti utilizzando richieste HTTP PUT e POST.
Questo capitolo illustra i passaggi per integrare le query persistenti con l’app WKND utilizzando richieste HTTP GET all’interno di cinque componenti React:
Questo documento fa parte di un tutorial in più parti. Assicurarsi che i capitoli precedenti siano stati completati prima di procedere con questo capitolo. Completamento del esercitazione di base è consigliato.
Le schermate IDE in questo capitolo provengono da Codice di Visual Studio
È disponibile un pacchetto di soluzioni da installare che completa i passaggi nell’interfaccia utente AEM per i capitoli da 1 a 4. Questo pacchetto è non necessario se i capitoli precedenti sono stati completati.
In questa esercitazione, imparerai a integrare le richieste di query persistenti nell’app di esempio WKND GraphQl React utilizzando AEM JavaScript headless SDK.
Per accelerare l'esercitazione, viene fornita un'app JS React iniziale.
Di seguito sono riportate le istruzioni per collegare l’app React a un Autore ambiente in AEM as a Cloud Service utilizzando un token di accesso allo sviluppo locale. È inoltre possibile collegare l’app a un istanza di authoring locale tramite SDK AEMaaCS utilizzo dell’autenticazione di base.
Decomprimi il file e apri il progetto nell’IDE.
Ottenere un token di sviluppo locale per l’ambiente AEM di destinazione.
Nel progetto, apri il file . .env.development
.
REACT_APP_DEV_TOKEN
pari a accessToken
dal token di sviluppo locale. (Non l’intero file JSON)REACT_APP_HOST_URI
all’url del AEM Autore ambiente.Apri un nuovo terminale e passa alla cartella del progetto. Esegui i seguenti comandi:
$ npm install
$ npm start
Viene aperto un nuovo browser in http://localhost:3000/aem-guides-wknd-pwa
.
Tocca Campeggio > Yosemite Backpack per visualizzare i dettagli dell'avventura del backpack Yosemite.
Apri gli strumenti di sviluppo del browser ed esamina XHR
richiesta
Dovresti visualizzare un POST
all’endpoint GraphQL. Visualizzazione della Payload
, puoi visualizzare l’intera query GraphQL inviata. Nelle sezioni successive, l’app verrà aggiornata per utilizzarla persistente query.
Nell’esercitazione di base, viene utilizzata una query GraphQl con parametri per richiedere un singolo frammento di contenuto ed eseguire il rendering dei dettagli dell’avventura. Quindi, aggiorna il adventureDetailQuery
per includere nuovi campi e utilizzare query persistenti create nel capitolo precedente.
Vengono creati cinque componenti:
Componente React | Dove si trova |
---|---|
Amministratore | src/components/Administrator.js |
Team | src/components/Team.js |
Dove si trova | src/components/Location.js |
Istruttori | src/components/Instructors.js |
Indirizzo | src/components/Address.js |
Personalizzazione Aggancio a effetto reattivo è stato creato in ascolto delle modifiche apportate alle query
, e al momento della modifica invia una richiesta HTTP POST all'endpoint GraphQL AEM e restituisce la risposta JSON all'app.
Crea un nuovo gancio da utilizzare persistente query. L’app può quindi effettuare richieste HTTP GET per i dettagli dell’avventura. La runPersistedQuery
del SDK client AEM headless viene utilizzato per semplificare l’esecuzione di una query persistente.
Aprire il file src/api/useGraphQL.js
Aggiungi un nuovo gancio per useGraphQLPersisted
:
/**
* Custom React Hook to perform a GraphQL query to a persisted query endpoint
* @param persistedPath - the short path to the persisted query
* @param fragmentPathParam - optional parameters object that can be passed in for parameterized persistent queries
*/
export function useGraphQLPersisted(persistedPath, fragmentPathVariable) {
let [data, setData] = useState(null);
let [errors, setErrors] = useState(null);
useEffect(() => {
let queryVariables = {};
// we pass in a primitive fragmentPathVariable (String) and then construct the object {fragmentPath: fragmentPathParam} to pass as query params to the persisted query
// It is simpler to pass a primitive into a React hooks, as comparing the state of a dependent object can be difficult. see https://reactjs.org/docs/hooks-faq.html#can-i-skip-an-effect-on-updates
if(fragmentPathVariable) {
queryVariables = {fragmentPath: fragmentPathVariable};
}
// execute a persisted query using the given path and pass in variables (if needed)
sdk.runPersistedQuery(persistedPath, queryVariables)
.then(({ data, errors }) => {
if (errors) setErrors(mapErrors(errors));
if (data) setData(data);
})
.catch((error) => {
setErrors(error);
});
}, [persistedPath, fragmentPathVariable]);
return { data, errors }
}
Salva le modifiche apportate al file.
Il file src/api/queries.js
contiene le query GraphQL utilizzate per alimentare l'applicazione adventureDetailQuery
restituisce i dettagli di una singola avventura utilizzando la richiesta POST GraphQL standard. Quindi, aggiorna il AdventureDetail
per utilizzare la persistenza wknd/all-adventure-details
query.
Apri src/screens/AdventureDetail.js
.
Prima commenta la seguente riga:
export default function AdventureDetail() {
...
//const { data, errors } = useGraphQL(adventureDetailQuery(adventureFragmentPath));
In questo modo viene utilizzato lo standard GraphQL POST per recuperare i dettagli dell’avventura in base a un adventureFragmentPath
Per utilizzare useGraphQLPersisted
gancio, aggiungi la seguente riga:
export default function AdventureDetail() {
//const { data, errors } = useGraphQL(adventureDetailQuery(adventureFragmentPath));
const {data, errors} = useGraphQLPersisted("wknd/all-adventure-details", adventureFragmentPath);
Osserva il percorso wknd/all-adventure-details
è il percorso della query persistente creata nel capitolo precedente.
Per utilizzare la query aggiornata come wknd/all-adventure-details
deve essere mantenuto nell'ambiente AEM di destinazione. Esamina i passaggi descritti in Query GraphQL persistenti o installare Pacchetto di soluzioni AEM
Torna all’app in esecuzione nel browser e utilizza gli strumenti per sviluppatori del browser per controllare la richiesta dopo aver navigato in un Dettagli sull'avventura pagina.
http://localhost:3000/graphql/execute.json/wknd/all-adventure-details;fragmentPath=/content/dam/wknd/en/adventures/yosemite-backpacking/yosemite-backpacking
Ora dovresti visualizzare un GET
richiesta che utilizza la query persistente in wknd/all-adventure-details
.
Passa ad altri dettagli avventura e osserva che lo stesso GET
La richiesta viene effettuata ma con percorsi di frammento diversi. L'applicazione deve continuare a funzionare come prima.
Fai riferimento a AdventureDetail.js
in aem-guides-wknd-headless-solution-tutorial.zip per un esempio completo del componente aggiornato.
Quindi, crea Posizione, Amministratore e Istruttori componenti per eseguire il rendering dei dati di posizione. La Indirizzo all’interno del Team componente.
In AdventureDetail.js
aggiungi un riferimento al <Location>
il passaggio dei dati di posizione dal adventure
oggetto dati:
export default function AdventureDetail() {
...
return (
...
<Location data={adventure.location} />
Esamina il file in src/components/Location.js
. La Location
il componente esegue il rendering dei dati relativi a dove soddisfare, informazioni di contatto, informazioni sul tempo e un’immagine della posizione dal Posizione Modello per frammento di contenuto. Come minimo, Location
il componente prevede un address
oggetto da trasmettere.
Fai riferimento a Location.js
in aem-guides-wknd-headless-solution-tutorial.zip per un esempio completo del componente aggiornato.
Una volta effettuati gli aggiornamenti, la pagina dei dettagli di cui è stato effettuato il rendering dovrebbe essere la seguente:
In AdventureDetail.js
aggiungi un riferimento al <Team>
(sotto il <Location>
passaggio del instructorTeam
i dati adventure
oggetto dati:
<Location data={adventure.location} />
<Team data={adventure.instructorTeam} />
Esamina il file in src/components/Team.js
. La Team
il componente esegue il rendering dei dati relativi alla data di creazione, all’immagine e alla descrizione del team dal Team Frammento di contenuto.
In Team.js
prende atto dell'inclusione della Address
componente.
export default function Team({data}) {
...
{teamPath && <Address _path={teamPath}/>}
In questo caso viene trasmesso un percorso al team corrente nel Address
, che a sua volta esegue una query per ottenere l’indirizzo in base al team.
Fai riferimento a Team.js
in aem-guides-wknd-headless-solution-tutorial.zip per un esempio completo del componente.
Una volta integrata la query, avrà un aspetto simile al seguente:
src/components/Address.js
. La Address
il componente esegue il rendering delle informazioni relative all’indirizzo, ad esempio indirizzo stradale, città, stato, codice postale, paese dal Indirizzo Frammento di contenuto e telefono ed e-mail dal Informazioni contatto riferimento al frammento.Address
è simile al AdventureDetails
in quanto effettua una chiamata persistente per recuperare dati in base a un percorso. La differenza è che utilizza /wknd/team-location-by-location-path
per effettuare la richiesta.Address.js
in aem-guides-wknd-headless-solution-tutorial.zip per un esempio completo del componente.In AdventureDetail.js
aggiungi un riferimento al <Adminstrator>
(sotto il <Team>
passaggio del administrator
i dati adventure
oggetto dati:
<Location data={adventure.location} />
<Team data={adventure.instructorTeam} />
<Administrator data={adventure.administrator} />
Esamina il file in src/components/Administrator.js
. La Administrator
il componente esegue il rendering di dettagli quali il nome completo dal Amministratore Frammento di contenuto ed esegui il rendering di telefono ed e-mail dal Informazioni contatto riferimento al frammento.
Fai riferimento a Administrator.js
in aem-guides-wknd-headless-solution-tutorial.zip per un esempio completo del componente.
Dopo aver creato il componente Amministratore, puoi eseguire il rendering dell’applicazione. L'output deve corrispondere all'immagine seguente:
In AdventureDetail.js
aggiungi un riferimento al <Instructors>
(sotto il <Administrator>
passaggio del instructorTeam
i dati adventure
oggetto dati:
<Location data={adventure.location} />
<Team data={adventure.instructorTeam}/>
<Administrator data={adventure.administrator} />
<Instructors data={adventure.instructorTeam} />
Esamina il file in src/components/Instructors.js
. La Instructors
Il componente esegue il rendering dei dati relativi a ciascun membro del team, inclusi nome completo, biografia, immagine, numero di telefono, livello di esperienza e competenze. Il componente si ripete su un array per visualizzare ogni membro.
Fai riferimento a Instructors.js
in aem-guides-wknd-headless-solution-tutorial.zip per un esempio completo del componente.
Una volta eseguito il rendering dell’applicazione, l’output deve corrispondere all’immagine seguente:
L'app finita deve avere l'aspetto seguente:
Puoi scaricare e utilizzare la versione finale dell’app:
aem-guides-wknd-headless-solution-tutorial.zip
Congratulazioni! Ora hai completato l’integrazione e l’implementazione delle query persistenti nell’app WKND di esempio.