使用者端應用程式整合
在上一章中，您使用GraphiQL Explorer建立和更新持久查詢。
本章會逐步引導您使用現有 React元件 內的HTTPGET要求，將持續性查詢與WKND使用者端應用程式（亦稱為WKND應用程式）整合在一起。 此外，您可選擇挑戰應用AEM Headless學習內容，以編碼專業知識增強WKND使用者端應用程式。
先決條件 prerequisites
本檔案是多部分教學課程的一部分。 在繼續本章之前，請確定已完成前面的章節。 WKND使用者端應用程式連線至AEM發佈服務，因此您 發佈下列內容至AEM發佈服務 非常重要。
- 專案設定
- GraphQL 端點
- 內容片段模型
- 編寫的內容片段
- GraphQL持續查詢
本章中的 IDE熒幕擷取畫面來自Visual Studio Code
第1-4章解決方案套件（選填） solution-package
可安裝的解決方案套件可完成第1-4章的AEM UI中的步驟。 如果前幾章已完成，則此封裝 不需要。
- 下載Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip。
- 在AEM中，瀏覽至 工具 > 部署 > 封裝 以存取 封裝管理員。
- 上傳並安裝上一步驟中下載的套件（zip檔案）。
- 將套件復寫至AEM Publish服務
目標 objectives
在本教學課程中，您將瞭解如何使用適用於JavaScript的AEM Headless Client，將持續性查詢的請求整合到範例WKND GraphQL React應用程式中。
複製並執行範例使用者端應用程式 clone-client-app
為加速教學課程，我們提供入門版React JS應用程式。
-
複製adobe/aem-guides-wknd-graphql存放庫：
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git -
編輯
aem-guides-wknd-graphql/advanced-tutorial/.env.development檔案並將REACT_APP_HOST_URI設定為指向您的目標AEM發佈服務。如果連線到作者執行個體，請更新驗證方法。
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=
note note NOTE 上述指示是將React應用程式連線至 AEM Publish服務，但若要連線至 AEM作者服務，請取得目標AEM as a Cloud Service環境的本機開發權杖。 也可以使用基本驗證，使用AEMaaCS SDK🔗將應用程式連線到本機作者執行個體。 -
開啟終端機並執行命令：
code language-shell $ cd aem-guides-wknd-graphql/advanced-tutorial $ npm install $ npm start -
新的瀏覽器視窗應載入http://localhost:3000
-
點選 露營 > Yosemite Backpacking 以檢視Yosemite Backpacking冒險詳細資料。
-
開啟瀏覽器的開發人員工具並檢查
XHR請求
您應該會看到對GraphQL端點的
GET個要求，其中包含專案設定名稱(wknd-shared)、持續查詢名稱(adventure-by-slug)、變數名稱(slug)、值(yosemite-backpacking)和特殊字元編碼。
http://localhost:3000而非AEM Publish Service網域提出，請檢閱基礎教學課程中的🔗。檢閱程式碼
在基本教學課程 — 使用AEM的GraphQL API建置React應用程式步驟中，我們已檢閱並增強一些重要檔案，以獲得實際操作的專業知識。 增強WKND應用程式之前，請先檢閱重要檔案。
檢閱Adventures React元件
WKND React應用程式的主要檢視是所有冒險清單，您可以根據 露營、騎腳踏車 之類的活動型別篩選這些冒險。 此檢視由Adventures元件轉譯。 以下是主要實作詳細資料：
-
src/components/Adventures.js呼叫useAllAdventures(adventureActivity)連結，而其中adventureActivity引數為活動型別。 -
已在
src/api/usePersistedQueries.js檔案中定義useAllAdventures(adventureActivity)連結。 根據adventureActivity值，它決定要呼叫哪個持續查詢。 如果不是null值，它會呼叫wknd-shared/adventures-by-activity，否則會取得所有可用的冒險wknd-shared/adventures-all。 -
掛接使用透過
aemHeadlessClient.js將查詢執行委派給AEMHeadless的主要fetchPersistedQuery(..)函式。 -
此掛接也只會從
response.data?.adventureList?.items的AEM GraphQL回應傳回相關資料，允許AdventuresReact檢視元件與父JSON結構無關。 -
成功執行查詢後，
Adventures.js的AdventureListItem(..)轉譯器函式會新增HTML元素，以顯示 影像、旅行長度、價格和標題 資訊。
檢閱AdventureDetail React元件
AdventureDetail React元件會呈現冒險的詳細資訊。 以下是主要實作詳細資料：
-
src/components/AdventureDetail.js呼叫useAdventureBySlug(slug)連結，而這裡slug引數是查詢引數。 -
如上所述，
useAdventureBySlug(slug)連結定義於src/api/usePersistedQueries.js檔案中。 它透過aemHeadlessClient.js委派給AEMHeadless來呼叫wknd-shared/adventure-by-slug持續查詢。 -
成功執行查詢後，
AdventureDetail.js中的AdventureDetailRender(..)轉譯器函式會新增HTML元素以顯示冒險詳細資料。
增強程式碼
使用adventure-details-by-slug持久查詢
在上一章中，我們建立了adventure-details-by-slug持續查詢，它提供其他冒險資訊，例如 位置、instructorTeam和管理員。 讓我們將adventure-by-slug取代為adventure-details-by-slug持續查詢，以呈現此額外資訊。
-
開啟
src/api/usePersistedQueries.js。 -
尋找函式
useAdventureBySlug()並將查詢更新為
...
// 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
);
...
顯示其他資訊
-
若要顯示其他冒險資訊，請開啟
src/components/AdventureDetail.js -
找到函式
AdventureDetailRender(..)並將傳回函式更新為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> </>); ... -
同時定義對應的轉譯器函式：
位置資訊
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> </> ); }位置
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> </>); }講師團隊
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> </>); }管理員
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> </>); }
定義新樣式
-
開啟
src/components/AdventureDetail.scss並新增下列類別定義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; }
完成上述增強功能後，WKND應用程式看起來如下所示，瀏覽器的開發人員工具顯示adventure-details-by-slug個持續的查詢呼叫。
增強功能挑戰（選購）
WKND React應用程式的主要檢視可讓您根據活動型別（例如 露營、循環）篩選這些冒險活動。 不過，WKND業務團隊想要額外的 位置 篩選功能。 需求為
- 在WKND應用程式的主檢視上，在左上角或右上角新增 位置 篩選圖示。
- 按一下 位置 篩選圖示應該會顯示位置清單。
- 從清單中按一下所需的位置選項時，應該只會顯示相符的「冒險」。
- 如果只有一個相符的Adventure，則會顯示Adventure詳細資料檢視。
恭喜
恭喜！您現在已完成整合，並將持續性查詢實作到範例WKND應用程式中。