이전 장에서는 GraphiQL 탐색기를 사용하여 지속 쿼리를 만들고 업데이트했습니다.
이 장에서는 기존 내에서 HTTP GET 요청을 사용하여 지속 쿼리를 WKND 클라이언트 애플리케이션(즉, WKND 앱)과 통합하는 단계를 안내합니다 구성 요소 반응. 또한 AEM Headless 학습을 적용하고 WKND 클라이언트 애플리케이션을 향상시키기 위한 코딩 전문 지식을 적용하는 선택적 과제를 제공합니다.
이 문서는 여러 부분으로 구성된 자습서의 일부입니다. 이 장을 진행하기 전에 이전 장이 완료되었는지 확인하십시오. WKND 클라이언트 애플리케이션은 AEM Publish 서비스에 연결되므로 AEM publish 서비스에 다음을 게시했습니다..
다음 이 장의 IDE 스크린샷은 Visual Studio 코드
1-4장에 대한 AEM UI의 단계를 완료하는 솔루션 패키지를 설치할 수 있습니다. 이 패키지는 필요 없음 이전 챕터가 완료된 경우.
이 자습서에서는 다음을 사용하여 지속 쿼리에 대한 요청을 샘플 WKND GraphQL React 앱에 통합하는 방법을 알아봅니다. JavaScript용 AEM Headless 클라이언트.
자습서를 가속화하기 위해 스타터 React JS 앱이 제공됩니다.
복제 adobe/aem-guides-wknd-graphql 저장소:
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
편집 aem-guides-wknd-graphql/advanced-tutorial/.env.development
파일 및 세트 REACT_APP_HOST_URI
target AEM 게시 서비스를 가리키도록 업데이트하는 것이 좋습니다.
작성자 인스턴스에 연결하는 경우 인증 방법을 업데이트합니다.
# 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 앱을 AEM 게시 서비스, 그러나 을 사용하여 AEM Author 서비스 대상 AEM as a Cloud Service 환경에 대한 로컬 개발 토큰을 얻습니다.
또한 앱을 aemAaCS SDK를 사용하는 로컬 작성자 인스턴스 기본 인증을 사용합니다.
터미널을 열고 다음 명령을 실행합니다.
$ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start
새 브라우저 창이 로드되어야 합니다. http://localhost:3000
누르기 캠핑 > 요세미티 백패킹 요세미티 배낭여행 모험에 관한 세부 정보를 보시려면,
브라우저의 개발자 도구를 열고 XHR
요청
다음이 표시됩니다. GET
프로젝트 구성 이름( )을 사용하여 GraphQL 엔드포인트에 대한 요청wknd-shared
), 지속 쿼리 이름(adventure-by-slug
), 변수 이름(slug
), 값(yosemite-backpacking
) 및 특수 문자 인코딩을 사용할 수 있습니다.
GraphQL API 요청이 http://localhost:3000
및 AEM Publish 서비스 도메인에 대한 것이 아니라, 검토 언더더 후드 기본 튜토리얼에서
다음에서 기본 자습서 - AEM GraphQL API를 사용하는 React 앱 빌드 몇 가지 주요 파일을 검토 및 개선하여 실무 전문 지식을 얻었습니다. WKND 앱을 개선하기 전에 주요 파일을 검토하십시오.
Adventures
구성 요소 반응WKND React 앱의 기본 보기는 모든 모험 목록이며 다음과 같은 활동 유형에 따라 이러한 모험을 필터링할 수 있습니다 캠핑, 사이클링. 이 보기는 Adventures
구성 요소. 다음은 주요 구현 세부 사항입니다.
다음 src/components/Adventures.js
호출 useAllAdventures(adventureActivity)
후크 앤 여기 adventureActivity
인수가 활동 유형입니다.
다음 useAllAdventures(adventureActivity)
후크는 src/api/usePersistedQueries.js
파일. 기준 adventureActivity
값을 지정하면 호출할 지속 쿼리가 결정됩니다. null 값이 아니면 wknd-shared/adventures-by-activity
, else가 사용 가능한 모든 모험 가져오기 wknd-shared/adventures-all
.
후크는 메인을 사용합니다 fetchPersistedQuery(..)
쿼리 실행을 위임하는 함수 AEMHeadless
경유 aemHeadlessClient.js
.
또한 후크는 의 AEM GraphQL 응답에서 관련 데이터만 반환합니다. response.data?.adventureList?.items
, 허용 Adventures
React 보기 구성 요소가 상위 JSON 구조에 불가지론자여야 합니다.
쿼리가 성공적으로 실행되면 AdventureListItem(..)
render 함수 위치 Adventures.js
HTML 요소를 추가하여 이미지, 이동 길이, 가격 및 제목 정보.
AdventureDetail
구성 요소 반응다음 AdventureDetail
React 구성 요소는 모험의 세부 정보를 렌더링합니다. 다음은 주요 구현 세부 사항입니다.
다음 src/components/AdventureDetail.js
호출 useAdventureBySlug(slug)
후크 앤 여기 slug
인수는 쿼리 매개 변수입니다.
위와 같이 useAdventureBySlug(slug)
후크는 src/api/usePersistedQueries.js
파일. 호출됨 wknd-shared/adventure-by-slug
을 위임하여 지속 쿼리 AEMHeadless
경유 aemHeadlessClient.js
.
쿼리가 성공적으로 실행되면 AdventureDetailRender(..)
render 함수 위치 AdventureDetail.js
HTML 요소를 추가하여 어드벤처 세부 정보를 표시합니다.
adventure-details-by-slug
지속 쿼리이전 장에서는 adventure-details-by-slug
지속 쿼리는 다음과 같은 추가 모험 정보를 제공합니다. 위치, 강사 팀 및 관리자. 을(를) 대체합니다. 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(..)
반환 함수를 다음으로 업데이트
...
return (<>
<h1 className="adventure-detail-title">{title}</h1>
<div className="adventure-detail-info">
<LocationInfo {...location} />
...
<Location {...location} />
<Administrator {...administrator} />
<InstructorTeam {...instructorTeam} />
</div>
</>);
...
해당 렌더링 함수도 정의합니다.
위치 정보
function LocationInfo({name}) {
if (!name) {
return null;
}
return (
<>
<div className="adventure-detail-info-label">Location</div>
<div className="adventure-detail-info-description">{name}</div>
</>
);
}
위치
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>
</>);
}
강사 팀
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>
</>);
}
관리자
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
및 다음 클래스 정의 추가
.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;
}
업데이트된 파일은 아래에서 사용할 수 있습니다. AEM 안내서 WKND - GraphQL 프로젝트, 참조 고급 자습서 섹션.
위의 개선 사항을 완료한 후 WKND 앱은 아래와 같으며 브라우저의 개발자 도구는 다음을 표시합니다 adventure-details-by-slug
지속 쿼리 호출.
WKND React 앱의 기본 보기에서는 과 같은 활동 유형에 따라 이러한 모험을 필터링할 수 있습니다. 캠핑, 사이클링. 그러나 WKND 비즈니스 팀은 추가 지원을 원합니다. 위치 기반 필터링 기능. 요구 사항은 다음과 같습니다.
축하합니다! 이제 통합 및 샘플 WKND 앱에 지속 쿼리 구현을 완료했습니다.