React 앱

예제 애플리케이션은 AEM(Adobe Experience Manager)의 헤드리스 기능을 살펴보는 좋은 방법입니다. 이 React 애플리케이션은 지속되는 쿼리를 사용하여 AEM GraphQL API를 사용하여 컨텐츠를 쿼리하는 방법을 보여줍니다. JavaScript용 AEM Headless Client는 앱을 구동하는 GraphQL 지속적인 쿼리를 실행하는 데 사용됩니다.

AEM Headless를 사용하여 반응형 앱

보기 GitHub의 소스 코드

A 전체 단계별 자습서 이 React 앱이 빌드된 방법을 설명합니다.

사전 요구 사항

다음 도구는 로컬에 설치해야 합니다.

AEM 요구 사항

React 응용 프로그램은 다음 AEM 배포 옵션과 함께 작동합니다. 모든 배포에는 WKND 사이트 v2.0.0+ 설치

React 응용 프로그램은 AEM 게시 그러나 React 애플리케이션의 구성에 인증이 제공된 경우 컨텐츠를 AEM Author에서 소스화할 수 있습니다.

사용 방법

복제 adobe/aem-guides-wknd-graphql 저장소:

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

편집 aem-guides-wknd-graphql/react-app/.env.development 파일 및 세트 REACT_APP_HOST_URI target AEM을 가리키도록 업데이트하는 것이 좋습니다.

작성자 인스턴스에 연결하는 경우 인증 방법을 업데이트합니다.

# Server namespace
REACT_APP_HOST_URI=http://localhost:4503

#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
REACT_APP_AUTH_METHOD=basic

# For Bearer auth, use DEV token (dev-token) from Cloud console
REACT_APP_DEV_TOKEN=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=admin
REACT_APP_BASIC_AUTH_PASS=admin

터미널을 열고 다음 명령을 실행합니다.

$ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

새 브라우저 창이 로드되어야 함 http://localhost:3000
WKND 참조 사이트의 모험 목록이 애플리케이션에 표시되어야 합니다.

코드

다음은 React 애플리케이션이 빌드되는 방법, AEM Headless에 연결하여 GraphQL 지속적인 쿼리를 사용하여 컨텐츠를 검색하는 방법 및 데이터가 표시되는 방법에 대한 요약입니다. 전체 코드는 GitHub.

지속되는 쿼리

AEM Headless 우수 사례에 따라 React 애플리케이션은 AEM GraphQL 지속된 쿼리를 사용하여 모험 데이터를 쿼리합니다. 이 응용 프로그램에서는 다음과 같은 두 가지 지속적인 쿼리를 사용합니다.

wknd/adventures-all AEM의 모든 모험을 반환하는 질의가 완료된 속성 집합을 사용하여 유지됩니다. 이렇게 지속된 쿼리가 초기 보기의 모험 목록을 구동합니다.

# Retrieves a list of all adventures
{
    adventureList {
        items {
            _path
            slug
            title
            price
            tripLength
            primaryImage {
                ... on ImageRef {
                _path
                mimeType
                width
                height
                }
            }
        }
    }
}

wknd/adventure-by-slug 지속형 쿼리, slug 전체 속성 세트를 사용하여 모험을 고유하게 식별하는 사용자 지정 속성입니다. 이 지속되는 쿼리는 모험 세부 사항 보기를 가능하게 합니다.

# Retrieves an adventure Content Fragment based on it's slug
# Example query variables:
# {"slug": "bali-surf-camp"}
# Technically returns an adventure list but since the the slug
# property is set to be unique in the CF Model, only a single CF is expected

query($slug: String!) {
  adventureList(filter: {
        slug: {
          _expressions: [ { value: $slug } ]
        }
      }) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          mimeType
          width
          height
        }
      }
      description {
        json
        plaintext
      }
      itinerary {
        json
        plaintext
      }
    }
    _references {
      ...on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

GraphQL 지속적인 쿼리 실행

AEM 지속적인 쿼리는 HTTP GET을 통해 실행되므로 JavaScript용 AEM Headless 클라이언트 에 사용됩니다. 지속되는 GraphQL 쿼리 실행 AEM에 대해 를 설정하고 모험 컨텐츠를 앱에 로드합니다.

지속되는 각 쿼리에는 해당하는 React가 있습니다 useEffect 후크 src/api/usePersistedQueries.js를 비동기적으로 호출하는 AEM HTTP GET의 지속된 쿼리 종료 지점을 호출하고 모험 데이터를 반환합니다.

각 함수는 aemHeadlessClient.runPersistedQuery(...): 지속형 GraphQL 쿼리를 실행합니다.

// src/api/usePersistedQueries.js

/**
 * React custom hook that returns a list of adevntures by activity. If no activity is provided, all adventures are returned.
 *
 * Custom hook that calls the 'wknd-shared/adventures-all' or 'wknd-shared/adventures-by-activity' persisted query.
 *
 * @returns an array of Adventure JSON objects, and array of errors
 */
export function useAdventuresByActivity(adventureActivity) {
  ...
  // If an activity is provided (i.e "Camping", "Hiking"...) call wknd-shared/adventures-by-activity query
  if (adventureActivity) {
    // The key is 'activity' as defined in the persisted query
    const queryParameters = { activity: adventureActivity };

    // Call the AEM GraphQL persisted query named "wknd-shared/adventures-by-activity" with parameters
    response = await fetchPersistedQuery("wknd-shared/adventures-by-activity", queryParameters);
  } else {
    // Else call the AEM GraphQL persisted query named "wknd-shared/adventures-all" to get all adventures
    response = await fetchPersistedQuery("wknd-shared/adventures-all");
  }

  ...
}

...
/**
 * Private function that invokes the AEM Headless client.
 *
 * @param {String} persistedQueryName the fully qualified name of the persisted query
 * @param {*} queryParameters an optional JavaScript object containing query parameters
 * @returns the GraphQL data or an error message
 */
async function fetchPersistedQuery(persistedQueryName, queryParameters) {
  let data;
  let err;

  try {
    // AEM GraphQL queries are asynchronous, either await their return or use Promise-based .then(..) { ... } syntax
    const response = await aemHeadlessClient.runPersistedQuery(
      persistedQueryName,
      queryParameters
    );
    // The GraphQL data is stored on the response's data field
    data = response?.data;
  } catch (e) {
    // An error occurred, return the error messages
    err = e
      .toJSON()
      ?.map((error) => error.message)
      ?.join(", ");
    console.error(e.toJSON());
  }

  return { data, err };
}

보기

React 응용 프로그램은 두 개의 보기를 사용하여 웹 경험에 모험 데이터를 표시합니다.

src/components/Adventures.js

호출 getAdventuresByActivity(..) 변환 전: src/api/usePersistedQueries.js 및 은 반환된 모험을 목록에 표시합니다.
src/components/AdventureDetail.js

를 호출합니다 getAdventureBySlug(..) 사용 slug 매개 변수 Adventures 구성 요소로, 단일 모험의 세부 사항을 표시합니다.

환경 변수

몇 개 환경 변수 AEM 환경에 연결하는 데 사용됩니다. 다음에서 실행되는 AEM Publish에 기본 연결 http://localhost:4503. 업데이트 .env.development 파일, AEM 연결을 변경하려면:

REACT_APP_HOST_URI=http://localhost:4502: AEM 타겟 호스트로 설정
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json: GraphQL 끝점 경로를 설정합니다. 이 앱은 지속된 쿼리만 사용하므로 이 React 앱에서 사용되지 않습니다.
REACT_APP_AUTH_METHOD=: 기본 인증 방법입니다. 선택 사항이며, 기본적으로 인증이 사용되지 않습니다.
- service-token: 서비스 자격 증명을 사용하여 AEM as a Cloud Service에서 액세스 토큰을 얻습니다.
- dev-token: AEM as a Cloud Service에서 로컬 개발에 개발 토큰 사용
- basic: 로컬 AEM 작성자를 통해 로컬 개발에 사용자/전달 사용
- 인증 없이 AEM에 연결하려면 비워 두십시오
REACT_APP_AUTHORIZATION=admin:admin: AEM 작성자 환경에 연결하는 경우 사용할 기본 인증 자격 증명을 설정합니다(개발용). 게시 환경에 연결하는 경우에는 이 설정이 필요하지 않습니다.
REACT_APP_DEV_TOKEN: 개발 토큰 문자열입니다. 원격 인스턴스에 연결하려면 기본 인증(user:pass) 외에 클라우드 콘솔의 개발 토큰과 함께 베어러 인증을 사용할 수 있습니다
REACT_APP_SERVICE_TOKEN: 서비스 자격 증명 파일의 경로입니다. 원격 인스턴스에 연결하기 위해 서비스 토큰으로 인증을 수행할 수도 있습니다(개발자 콘솔에서 파일 다운로드).

프록시 AEM 요청

웹 팩 개발 서버 사용 시(npm start) 프로젝트에 프록시 설정 사용 http-proxy-middleware. 파일은에서 구성됩니다. src/setupProxy.js 및은(는) .env 및 .env.development.

AEM 작성 환경에 연결하는 경우 해당 인증 방법을 구성해야 합니다..

CORS(원본 간 리소스 공유)

이 React 애플리케이션은 대상 AEM 환경에서 실행되는 AEM 기반 CORS 구성을 사용하며 React 앱이 실행된다고 가정합니다 http://localhost:3000 개발 모드. 다음 CORS 구성 의 일부입니다. WKND 사이트.

CORS 구성

React 앱

사전 요구 사항

AEM 요구 사항

사용 방법

코드

지속되는 쿼리

GraphQL 지속적인 쿼리 실행

보기

환경 변수

프록시 AEM 요청

CORS(원본 간 리소스 공유)

Business.Adobe.com 리소스

이 페이지에서는

다음 보기:

학습

기술 문서

커뮤니티

고객지원

리소스

Adobe 계정

Adobe