DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurs om AEM Headless

Integrering av klientprogram

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gäller:
  • Experience Manager as a Cloud Service

Skapat för:

  • Mellanliggande
  • Utvecklare

I föregående kapitel skapade och uppdaterade du beständiga frågor med GraphiQL Explorer.

I det här kapitlet beskrivs de olika stegen för att integrera de beständiga frågorna med WKND-klientprogrammet (även WKND App) med HTTP GET-begäranden i befintliga React-komponenter. Det är också en valfri utmaning att använda dina AEM Headless-kunskaper och kodningskunskaper för att förbättra WKND-klientapplikationen.

Förutsättningar prerequisites

Det här dokumentet är en del av en självstudiekurs i flera delar. Se till att föregående kapitel har fyllts i innan du fortsätter med det här kapitlet. WKND-klientprogrammet ansluter till AEM publiceringstjänst, så det är viktigt att du har publicerat följande till AEM publiceringstjänst.

  • Projektkonfigurationer
  • GraphQL slutpunkter
  • Modeller för innehållsfragment
  • Skapat innehåll
  • GraphQL beständiga frågor

Skärmbilderna IDE i det här kapitlet kommer från Visual Studio-kod

Kapitel 1-4 Lösningspaket (valfritt) solution-package

Det finns ett lösningspaket som slutför stegen i AEM-gränssnittet för kapitel 1-4. Det här paketet behövs inte om de föregående kapitlen har slutförts.

  1. Hämta Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip.
  2. I AEM går du till Verktyg > Distribution > Paket för att komma åt Pakethanteraren.
  3. Ladda upp och installera det paket (zip-fil) som laddats ned i föregående steg.
  4. Replikera paketet till tjänsten AEM Publish

Mål objectives

I den här självstudiekursen får du lära dig hur du integrerar begäranden om beständiga frågor i exempelappen WKND GraphQL React med AEM Headless Client för JavaScript.

Klona och kör exempelklientprogrammet clone-client-app

För att snabba upp självstudiekursen finns en React JS-app med startfunktion.

  1. Klona databasen adobe/aem-guides-wknd-graphql:

    code language-shell 
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. Redigera filen aem-guides-wknd-graphql/advanced-tutorial/.env.development och ställ in REACT_APP_HOST_URI så att den pekar på AEM målpubliceringstjänst.

    Uppdatera autentiseringsmetoden om du ansluter till en författarinstans.

    code language-plain 
    # 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=

    React App Development Environment

    note note
    NOTE
    Ovanstående instruktioner är att ansluta React-appen till AEM Publish-tjänsten, men om du vill ansluta till AEM Author-tjänsten får du en lokal utvecklingstoken för AEM as a Cloud Service-målmiljön.
    Det går också att ansluta appen till en lokal författarinstans med AEMaaCS SDK med grundläggande autentisering.

  3. Öppna en terminal och kör kommandona:

    code language-shell 
    $ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start

  4. Ett nytt webbläsarfönster ska läsas in på http://localhost:3000

  5. Tryck på Camping > Yosemite Backpackaging för att visa Yosemite Backpackaging-äventyrsinformation.

    Yosemite Backpackaging Screen

  6. Öppna webbläsarens utvecklarverktyg och granska XHR-begäran

    POST GraphQL

    Du bör se GET begäranden till GraphQL-slutpunkten med projektkonfigurationsnamn (wknd-shared), beständigt frågenamn (adventure-by-slug), variabelnamn (slug), värde (yosemite-backpacking) och specialteckenkodningar.

IMPORTANT
Om du undrar varför GraphQL API-begäran görs mot domänen http://localhost:3000 och INTE mot AEM Publish Service kan du gå igenom ​ under värddatorn ​ från den grundläggande självstudiekursen.

Granska koden

I den grundläggande självstudiekursen - Bygg en React-app där AEM GraphQL API:er används har vi granskat och förbättrat några viktiga filer så att vi får expertis. Granska nyckelfilerna innan du förbättrar WKND-appen.

Granska Adventures-reaktionskomponent

Huvudvyn i appen WKND React är listan över alla annonser och du kan filtrera dessa annonser baserat på aktivitetstyp som Camping, Cycling. Den här vyn återges av komponenten Adventures. Nedan finns de viktigaste implementeringsdetaljerna:

  • src/components/Adventures.js anropar useAllAdventures(adventureActivity)-kroken och här adventureActivity-argumentet är aktivitetstyp.

  • Koppeln useAllAdventures(adventureActivity) definieras i filen src/api/usePersistedQueries.js. Baserat på värdet adventureActivity avgör det vilken beständig fråga som ska anropas. Om värdet inte är null anropas wknd-shared/adventures-by-activity, annars får alla tillgängliga äventyr wknd-shared/adventures-all.

  • Haken använder huvudfunktionen fetchPersistedQuery(..) som delegerar frågekörningen till AEMHeadless via aemHeadlessClient.js.

  • Haken returnerar bara relevanta data från AEM GraphQL-svaret på response.data?.adventureList?.items, vilket gör att komponenterna i vyn Adventures kan vara agnostiska för de överordnade JSON-strukturerna.

  • Vid slutförd frågekörning lägger renderingsfunktionen AdventureListItem(..) från Adventures.js till HTML-element för att visa informationen Bild, Trip Length, Price och Title.

Granska AdventureDetail-reaktionskomponent

Reaktionskomponenten AdventureDetail återger informationen om äventyret. Nedan finns de viktigaste implementeringsdetaljerna:

  • Argumentet src/components/AdventureDetail.js anropar useAdventureBySlug(slug)-krok och här slug är frågeparameter.

  • Precis som ovan definieras kroken useAdventureBySlug(slug) i filen src/api/usePersistedQueries.js. Den anropar wknd-shared/adventure-by-slug beständig fråga genom delegering till AEMHeadless via aemHeadlessClient.js.

  • När frågan har körts lägger återgivningsfunktionen AdventureDetailRender(..) från AdventureDetail.js till HTML-element för att visa Adventure-informationen.

Förbättra koden

Använd adventure-details-by-slug beständig fråga

I det föregående kapitlet skapade vi den adventure-details-by-slug beständiga frågan, som innehåller ytterligare Adventure-information som location, instructorTeam och administrator. Låt oss ersätta adventure-by-slug med adventure-details-by-slug beständig fråga för att återge denna ytterligare information.

  1. Öppna src/api/usePersistedQueries.js.

  2. Leta reda på funktionen useAdventureBySlug() och uppdatera frågan som

 ...

 // 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
 );

 ...

Visa ytterligare information

  1. Om du vill visa ytterligare äventyrsinformation öppnar du src/components/AdventureDetail.js

  2. Leta reda på funktionen AdventureDetailRender(..) och uppdatera returfunktionen som

    code language-javascript 
    ...

return (<>
    <h1 className="adventure-detail-title">{title}</h1>
    <div className="adventure-detail-info">

        <LocationInfo {...location} />

        ...

        <Location {...location} />

        <Administrator {...administrator} />

        <InstructorTeam {...instructorTeam} />

    </div>
</>);

...

  3. Definiera även motsvarande återgivningsfunktioner:

    LocationInfo

    code language-javascript 
    function LocationInfo({name}) {

    if (!name) {
        return null;
    }

    return (
        <>
            <div className="adventure-detail-info-label">Location</div>
            <div className="adventure-detail-info-description">{name}</div>
        </>
    );

}

    Plats

    code language-javascript 
    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

    code language-javascript 
    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>
        </>);
}

    Administratör

    code language-javascript 
    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>
        </>);
}

Definiera nya format

  1. Öppna src/components/AdventureDetail.scss och lägg till följande klassdefinitioner

    code language-css 
    .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;
}
TIP
De uppdaterade filerna är tillgängliga under AEM Guides WKND - GraphQL -projektet, se avsnittet Avancerad självstudiekurs.

När du har slutfört förbättringarna ovan ser WKND-appen ut så här nedan och webbläsarens utvecklarverktyg visar adventure-details-by-slug beständiga frågeanrop.

Förbättrad WKND-APP

Utökad utmaning (valfritt)

I huvudvyn i appen WKND React kan du filtrera dessa annonser baserat på aktivitetstyp som Camping, Cycling. WKND:s affärsteam vill dock ha en extra Location-baserad filtreringsfunktion. Kraven är

  • I huvudvyn för WKND-programmet lägger du till filterikonen Plats i det övre vänstra eller högra hörnet.
  • Om du klickar på Plats-filtreringsikonen visas en lista med platser.
  • Om du klickar på ett önskat platsalternativ i listan visas endast matchande annonser.
  • Om det bara finns en matchande Adventure visas Adventure Details-vyn.

Grattis

Grattis! Du har nu slutfört integreringen och implementeringen av de beständiga frågorna i WKND-exempelappen.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4