React アプリ

サンプルアプリケーションは、Adobe Experience Manager(AEM) のヘッドレス機能を調べる優れた方法です。 AEMの GraphQL API を使用してコンテンツをクエリする方法を示す React アプリケーションが提供されます。 JavaScript 版AEMヘッドレスクライアントは、アプリを強力に実行する GraphQL クエリを実行するために使用されます。

表示 GitHub のソースコード

React アプリケーション

詳細な手順のチュートリアルを利用できます here.

前提条件

次のツールは、ローカルにインストールする必要があります。

AEM要件

アプリケーションは、AEMに接続するように設計されています 作成者 または 公開 最新リリースの WKND リファレンスサイト インストール済み

推奨 WKND リファレンスサイトのCloud Service環境へのデプロイ. を使用したローカル設定 AEM Cloud Service SDK または AEM 6.5 QuickStart jar また、を使用することもできます。

使用方法

  1. aem-guides-wknd-graphql リポジトリ:

    git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. 編集 aem-guides-wknd/react-app/.env.development ファイルを作成し、 REACT_APP_HOST_URI がターゲットAEMインスタンスを指している。 認証方法を更新します(オーサーインスタンスに接続する場合)。

    # Server namespace
    REACT_APP_HOST_URI=http://localhost:4503
    REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
    #AUTH (Choose one method)
    # Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
    ...
    
  3. ターミナルを開き、次のコマンドを実行します。

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. 新しいブラウザーウィンドウがに読み込まれます。 http://localhost:3000

  5. WKND リファレンスサイトからのアドベンチャーのリストがアプリケーションに表示されます。

コード

以下に、アプリケーションの強化に使用する重要なファイルとコードの概要を示します。 完全なコードは、 GitHub.

AEM Headless Client for JavaScript

​10. AEM Headless Client は、GraphQL クエリの実行に使用されます。 AEMヘッドレスクライアントは、クエリを実行する 2 つの方法を提供します。 runQuery および runPersistedQuery.

runQuery は、AEMコンテンツに対して標準の GraphQL クエリを実行します。これは、最も一般的なタイプのクエリ実行です。

永続クエリ は、AEMの機能で、GraphQL クエリの結果をキャッシュし、結果をGET経由で使用できるようにします。 永続化クエリは、繰り返し実行される一般的なクエリに使用します。 このアプリケーションでは、Adventures のリストは、ホーム画面で最初に実行されるクエリです。 これは非常に人気の高いクエリなので、持続的なクエリを使用する必要があります。 runPersistedQuery は、永続化されたクエリエンドポイントに対してリクエストを実行します。

src/api/useGraphQL.jsReact エフェクトフック は、パラメーターの変更をリッスンします。 query および path. If query が空白の場合、 path. ここでは、AEMヘッドレスクライアントが構築され、データの取得に使用されます。

function useGraphQL(query, path) {
    let [data, setData] = useState(null);
    let [errorMessage, setErrors] = useState(null);

    useEffect(() => {
      // construct a new AEMHeadless client based on the graphQL endpoint
      const sdk = new AEMHeadless({ endpoint: REACT_APP_GRAPHQL_ENDPOINT })

      // if query is not null runQuery otherwise fall back to runPersistedQuery
      const request = query ? sdk.runQuery.bind(sdk) : sdk.runPersistedQuery.bind(sdk);

      request(query || path)
        .then(({ data, errors }) => {
          //If there are errors in the response set the error message
          if(errors) {
            setErrors(mapErrors(errors));
          }
          //If data in the response set the data as the results
          if(data) {
            setData(data);
          }
        })
        .catch((error) => {
          setErrors(error);
        });
    }, [query, path]);

    return {data, errorMessage}
}

アドベンチャーコンテンツ

主に Adventures のリストが表示され、アドベンチャーの詳細をクリックするオプションがユーザーに提供されます。

Adventures.js - Adventures のカードリストを表示します。 初期状態では、 永続クエリ これは プリパッケージ と WKND リファレンスサイトの両方に表示されます。 エンドポイントは /wknd/adventures-all. ユーザーがアクティビティに基づいて結果をフィルタリングして実験できるボタンはいくつかあります。

function filterQuery(activity) {
  return `
    {
      adventureList (filter: {
        adventureActivity: {
          _expressions: [
            {
              value: "${activity}"
            }
          ]
        }
      }){
        items {
          _path
        adventureTitle
        adventurePrice
        adventureTripLength
        adventurePrimaryImage {
          ... on ImageRef {
            _path
            mimeType
            width
            height
          }
        }
      }
    }
  }
  `;
}

AdventureDetail.js — アドベンチャーの詳細ビューを表示します。 URL から解析されるアドベンチャーへのパスに基づいて、graphQL クエリを作成します。

//parse the content fragment from the url
const contentFragmentPath = props.location.pathname.substring(props.match.url.length);
...
function adventureDetailQuery(_path) {
  return `{
    adventureByPath (_path: "${_path}") {
      item {
        _path
          adventureTitle
          adventureActivity
          adventureType
          adventurePrice
          adventureTripLength
          adventureGroupSize
          adventureDifficulty
          adventurePrice
          adventurePrimaryImage {
            ... on ImageRef {
              _path
              mimeType
              width
              height
            }
          }
          adventureDescription {
            html
          }
          adventureItinerary {
            html
          }
      }
    }
  }
  `;
}

環境変数

複数 環境変数 は、このプロジェクトでAEM環境に接続するために使用されます。 デフォルトでは、http://localhost:4502で実行されているAEMオーサー環境に接続します。 この動作を変更する場合は、 .env.development ファイルの内容に応じて、

  • REACT_APP_HOST_URI=http://localhost:4502 - AEMターゲットホストに設定
  • REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json - GraphQL エンドポイントパスの設定
  • REACT_APP_AUTH_METHOD= — 推奨される認証方法。 オプション。デフォルトでは認証は使用されません。
    • service-token — クラウド環境 PROD 用のサービストークン交換を使用
    • dev-token - Cloud Env でのローカル開発に開発トークンを使用
    • basic — ローカルオーサー環境でのローカル開発に user/pass を使用
    • 認証方法を使用しない場合は空白のままにします。
  • REACT_APP_AUTHORIZATION=admin:admin - AEM オーサー環境に接続する場合に使用する基本認証資格情報を設定します(開発用のみ)。 パブリッシュ環境に接続する場合、この設定は不要です。
  • REACT_APP_DEV_TOKEN — 開発トークン文字列。 リモートインスタンスに接続するには、Basic auth (user:pass) の横で、Cloud Console の DEV トークンで Bearer 認証を使用できます
  • REACT_APP_SERVICE_TOKEN — サービストークンファイルのパス。 リモートインスタンスに接続する場合は、サービストークンでも認証をおこなうことができます(クラウドコンソールからファイルをダウンロード)。

プロキシ API リクエスト

Webpack 開発サーバーを使用する場合 (npm start) プロジェクトが プロキシ設定 using http-proxy-middleware. このファイルは、 src/setupProxy.js とは、に設定された複数のカスタム環境変数を使用します。 .env および .env.development.

AEMオーサー環境に接続する場合は、対応する認証方法を設定する必要があります。

CORS — クロスオリジンリソース共有

このプロジェクトは、ターゲットAEM環境で実行されている CORS 設定に依存しており、アプリが開発モードでhttp://localhost:3000上で実行されていることを前提としています。 10. COR の設定WKND リファレンスサイト.

CORS の設定

オーサー環境の CORS 設定例

このページ