クライアントアプリケーションの統合

前の章では、GraphiQL エクスプローラーを使用して永続クエリを作成し、更新しました。

この章では、既存の内部で HTTPGETリクエストを使用して、永続化されたクエリを WKND クライアントアプリケーション(WKND アプリ)に統合する手順について説明します React コンポーネント. また、AEMヘッドレスラーニングを適用し、WKND クライアントアプリケーションを強化するための専門知識をコーディングするためのオプションの課題も提供します。

前提条件

このドキュメントは、マルチパートチュートリアルの一部です。 この章を進める前に、前の章が完了していることを確認してください。 WKND クライアントアプリケーションはAEMパブリッシュサービスに接続するので、次の操作をおこなうことが重要です。 次の内容をAEMパブリッシュサービスに公開しました.

  • プロジェクト設定
  • GraphQL エンドポイント
  • コンテンツフラグメントモデル
  • 作成済みコンテンツフラグメント
  • GraphQL 永続クエリ

この この章の IDE スクリーンショットは、次のものから取得します。 Visual Studio Code

第 1 章~第 4 章ソリューションパッケージ(任意)

1 ~ 4 章のAEM UI の手順を完了するソリューションパッケージがインストール可能です。 このパッケージは 不要 前の章が完了している場合

  1. ダウンロード Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip.
  2. AEMで、に移動します。 ツール > 導入 > パッケージ アクセスする パッケージマネージャー.
  3. 前の手順でダウンロードしたパッケージ(zip ファイル)をアップロードしてインストールします。
  4. AEM パブリッシュサービスにパッケージをレプリケートします

目的

このチュートリアルでは、を使用して、永続的なクエリのリクエストをサンプル WKND GraphQL React アプリに統合する方法を学びます。 JavaScript 用AEMヘッドレスクライアント.

サンプルクライアントアプリケーションの複製と実行

チュートリアルを高速化するために、スターター React JS アプリが提供されます。

  1. のクローン adobe/aem-guides-wknd-graphql リポジトリ:

    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. を編集します。 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 アプリ開発環境

    メモ

    上記の手順は、React アプリを AEM パブリッシュサービス​ただし、 AEM オーサーサービス target AEM as a Cloud Service環境のローカル開発トークンを取得します。

    アプリを AEMaaCS SDK を使用したローカルオーサーインスタンス 基本認証を使用します。

  3. ターミナルを開き、次のコマンドを実行します。

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

  5. タップ Camping > ヨセミテバックパッキン ヨセミテバックパッキングの冒険の詳細を見る

    Yosemite バックパッキング画面

  6. ブラウザーの開発者ツールを開き、 XHR リクエスト

    POSTGraphQL

    次のようになります。 GET プロジェクト設定名 (wknd-shared)、永続化されたクエリ名 (adventure-by-slug),変数名 (slug),値 (yosemite-backpacking)、および特殊文字エンコーディングで使用できます。

重要

GraphQL API リクエストが http://localhost:3000 AEM パブリッシュサービスドメインに対してではなく、 フードの下で 基本チュートリアルから。

コードの確認

基本チュートリアル — AEM GraphQL API を使用した React アプリの構築 実践的な専門知識を得るために、主要なファイルをいくつか確認し、拡張した手順です。 WKND アプリを強化する前に、主要なファイルを確認します。

レビュー Adventures React コンポーネント

WKND React アプリのメインビューは、すべてのアドベンチャのリストです。これらのアドベンチャは、次のようなアクティビティタイプに基づいてフィルタリングできます。 キャンピング、サイクリング. このビューは、 Adventures コンポーネント。 主な実装の詳細を次に示します。

  • この src/components/Adventures.js 呼び出し useAllAdventures(adventureActivity) ここに逃げ込む adventureActivity 引数はアクティビティタイプです。

  • この useAllAdventures(adventureActivity) フックが src/api/usePersistedQueries.js ファイル。 基準 adventureActivity の値を指定する場合、呼び出す永続クエリを決定します。 null 値でない場合は、を呼び出します。 wknd-shared/adventures-by-activityを指定しない場合は、利用可能なすべてのアドベンチャーを取得します wknd-shared/adventures-all.

  • フックはメイン fetchPersistedQuery(..) クエリ実行をに委任する関数 AEMHeadless 経由 aemHeadlessClient.js.

  • また、関連するデータは、AEM GraphQL 応答から、 response.data?.adventureList?.itemsAdventures 親 JSON 構造に依存しない React ビューコンポーネント。

  • クエリが正常に実行されると、 AdventureListItem(..) 関数を Adventures.js を表示するHTML要素を追加します。 画像、旅行の長さ、価格、タイトル 情報。

レビュー AdventureDetail React コンポーネント

この AdventureDetail React コンポーネントは、アドベンチャーの詳細をレンダリングします。 主な実装の詳細を次に示します。

  • この src/components/AdventureDetail.js 呼び出し useAdventureBySlug(slug) ここに逃げ込む slug 引数はクエリパラメータです。

  • 上記のように、 useAdventureBySlug(slug) フックが src/api/usePersistedQueries.js ファイル。 呼び出し wknd-shared/adventure-by-slug に委任することで、永続化されたクエリを AEMHeadless 経由 aemHeadlessClient.js.

  • クエリが正常に実行されると、 AdventureDetailRender(..) 関数を AdventureDetail.js アドベンチャーの詳細を表示するHTML要素を追加します。

コードの拡張

用途 adventure-details-by-slug 持続クエリ

前の章では、 adventure-details-by-slug 持続的なクエリ。次のような追加のアドベンチャー情報を提供します。 場所、講師チーム、管理者. 次を置き換えます。 adventure-by-slugadventure-details-by-slug 永続化されたクエリを使用して、この追加情報をレンダリングできます。

  1. src/api/usePersistedQueries.jsを開きます。

  2. 関数の場所 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
 );

 ...

追加情報を表示

  1. 追加のアドベンチャー情報を表示するには、 src/components/AdventureDetail.js

  2. 関数の場所 AdventureDetailRender(..) として戻り関数を更新

    ...
    
    return (<>
        <h1 className="adventure-detail-title">{title}</h1>
        <div className="adventure-detail-info">
    
            <LocationInfo {...location} />
    
            ...
    
            <Location {...location} />
    
            <Administrator {...administrator} />
    
            <InstructorTeam {...instructorTeam} />
    
        </div>
    </>);
    
    ...
    
  3. 対応するレンダリング関数も定義します。

    LocationInfo

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

    InstructorTeam

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

新しいスタイルを定義

  1. 開く 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 アプリ

機能強化の課題(オプション)

WKND React アプリのメインビューでは、次のようなアクティビティタイプに基づいてこれらの Adventures をフィルタリングできます。 キャンピング、サイクリング. しかし、WKND ビジネスチームは追加の 場所 ベースのフィルタリング機能 使用するための要件は以下のとおりです。

  • WKND アプリのメイン表示で、左上隅または右隅に 場所 フィルターアイコン。
  • クリック 場所 フィルターアイコンには、場所のリストが表示されます。
  • リストから目的のロケーションオプションをクリックすると、一致する Adventures のみが表示されます。
  • 一致するアドベンチャーが 1 つだけの場合、アドベンチャーの詳細ビューが表示されます。

これで完了です

おめでとうございます。これで、統合が完了し、永続化されたクエリをサンプル WKND アプリに実装することが完了しました。

このページ