フラグメントリファレンスを使用した高度なデータモデリング

別のコンテンツフラグメント内からコンテンツフラグメントを参照できます。 これにより、フラグメント間の関係を持つ複雑なデータモデルを作成できます。

この章では、「フラグメント参照」フィールドを使用して、コントリビューターモデルへの参照を含めるようにアドベンチャーモデルを更新します。 また、GraphQLクエリを変更して、参照モデルのフィールドを含める方法についても学習します。

前提条件

これは複数のパートから成るチュートリアルで、前のパートで説明した手順が完了していることを前提としています。

目的

この章では、次の方法について説明します。

  • 「フラグメント参照」フィールドを使用するようにコンテンツフラグメントモデルを更新する
  • 参照モデルからフィールドを返すGraphQLクエリを作成する

フラグメント参照の追加

コントリビューターモデルへの参照を追加するために、アドベンチャーコンテンツフラグメントモデルを更新します。

  1. 新しいブラウザーを開き、AEMに移動します。

  2. AEM Start​メニューから、ツール / アセット / コンテンツフラグメントモデル / WKNDサイト​に移動します。

  3. アドベンチャー​コンテンツフラグメントモデルを開きます。

    アドベンチャーコンテンツフラグメントモデルを開く

  4. データタイプ​の下で、フラグメント参照​フィールドをメインパネルにドラッグ&ドロップします。

    フラグメント参照フィールドを追加

  5. このフィールドの​プロパティ​を次のように更新します。

    • レンダリング時の名前 - fragmentreference
    • フィールドラベル — アドベンチャーコントリビューター
    • プロパティ名 - adventureContributor
    • モデルタイプ — コントリビューター​モデルを選択します。
    • ルートパス - /content/dam/wknd

    フラグメント参照のプロパティ

    プロパティ名adventureContributorを使用して、コントリビューターコンテンツフラグメントを参照できるようになりました。

  6. 変更内容をモデルに保存します。

コントリビューターのアドベンチャーへの割り当て

アドベンチャーコンテンツフラグメントモデルが更新されたので、既存のフラグメントを編集し、コントリビューターを参照できます。 コンテンツフラグメントモデル​を編集すると、そのモデルから作成された既存のコンテンツフラグメントが​影響を受けることに注意してください。

  1. アセット > ファイル > WKNDサイト > 英語 > 冒険​​バリCamp<a11/に移動します。2/>.

    バリサーフキャンプフォルダ

  2. Bali Surf Camp​コンテンツフラグメントをクリックして、コンテンツフラグメントエディターを開きます。

  3. アドベンチャーコントリビューター​フィールドを更新し、フォルダーアイコンをクリックしてコントリビューターを選択します。

    「Stacey Roswells」を「寄稿者」として選択します。

    寄稿者フラグメントへのパスを選択します

    投稿者への入力済みパス

    寄稿者​モデルを使用して作成されたフラグメントのみを選択できます。

  4. フラグメントに対する変更を保存します。

  5. 上記の手順を繰り返して、Yosemite BackpackingColorado Rock Climingのような冒険に貢献者を割り当てます。

GraphiQLを使用したクエリネストされたコンテンツフラグメント

次に、アドベンチャーのクエリを実行し、参照されるコントリビューターモデルのネストされたプロパティを追加します。 GraphiQLツールを使用して、クエリの構文をすばやく確認します。

  1. AEMのGraphiQLツールに移動します。http://localhost:4502/content/graphiql.html

  2. 次のクエリを入力します。

    {
      adventureByPath(_path:"/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp") {
         item {
           _path
           adventureTitle
           adventureContributor {
             fullName
             occupation
             pictureReference {
            ...on ImageRef {
              _path
            }
          }
        }
      }
     }
    }
    

    上記のクエリは、パスによる単一のアドベンチャー用です。 adventureContributorプロパティは寄稿者モデルを参照し、ネストされたコンテンツフラグメントからプロパティを要求できます。

  3. クエリを実行すると、次のような結果が得られます。

    {
      "data": {
        "adventureByPath": {
            "item": {
                "_path": "/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp",
                "adventureTitle": "Bali Surf Camp",
                "adventureContributor": {
                    "fullName": "Stacey Roswells",
                    "occupation": "Photographer",
                    "pictureReference": {
                        "_path": "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
                    }
                }
            }
         }
      }
    }
    
  4. adventureListなどの他のクエリを試し、参照されるコンテンツフラグメントのプロパティをadventureContributorの下に追加します。

Reactアプリを更新してコントリビューターコンテンツを表示する

次に、Reactアプリケーションで使用されるクエリを更新し、新しい寄稿者を含めて、その寄稿者に関する情報をアドベンチャーの詳細ビューの一部として表示します。

  1. IDEでWKND GraphQL Reactアプリを開きます。

  2. src/components/AdventureDetail.js ファイルを開きます。

    アドベンチャー詳細コンポーネントIDE

  3. 関数adventureDetailQuery(_path)を探します。 adventureDetailQuery(..)関数は、フィルタリングGraphQLクエリをラップするだけです。このクエリでは、AEM <modelName>ByPath構文を使用して、JCRパスで識別される単一のコンテンツフラグメントをクエリします。

  4. クエリを更新して、参照先の寄稿者に関する情報を含めます。

    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
                }
                adventureContributor {
                    fullName
                    occupation
                    pictureReference {
                        ...on ImageRef {
                            _path
                        }
                    }
                }
              }
           }
         }
        `;
    }
    

    この更新により、adventureContributorfullNameoccupationおよびpictureReferenceに関する追加のプロパティがクエリに含まれます。

  5. function Contributor(...)にあるAdventureDetail.jsファイルに埋め込まれたContributorコンポーネントをInspectします。 プロパティが存在する場合、このコンポーネントは寄稿者の名前、職業、画像をレンダリングします。

    Contributorコンポーネントは、AdventureDetail(...) returnメソッドで参照されます。

    function AdventureDetail(props) {
        ...
        return (
            ...
             <h2>Itinerary</h2>
            <hr />
            <div className="adventure-detail-itinerary"
                 dangerouslySetInnerHTML={{__html: adventureData.adventureItinerary.html}}></div>
            {/* Contributor component is instaniated and 
                is passed the adventureContributor object from the GraphQL Query results */}
            <Contributer {...adventureData.adventureContributor} />
            ...
        )
    }
    
  6. ファイルに変更を保存します。

  7. Reactアプリを起動します(まだ実行していない場合)。

    $ cd aem-guides-wknd-graphql/react-app
    $ npm start
    
  8. http://localhost:3000に移動し、参照元のコントリビューターを持つアドベンチャーをクリックします。 旅程​の下に投稿者情報が表示されます。

    アプリに追加された投稿者

おめでとうございます。

おめでとうございます。既存のコンテンツフラグメントモデルを更新し、「フラグメントの参照」フィールドを使用して、ネストされたコンテンツフラグメントを参照するようにしました。 また、GraphQLクエリを変更して、参照モデルのフィールドを含める方法も学習しました。

次の手順

次の章のAEMパブリッシュ環境を使用した実稼動デプロイメントでは、AEMオーサーサービスとパブリッシュサービス、およびヘッドレスアプリケーション向けに推奨されるデプロイメントパターンについて説明します。 環境変数を使用するように既存のアプリケーションを更新し、ターゲット環境に基づいてGraphQLエンドポイントを動的に変更します。 また、クロスオリジンリソース共有(CORS)用にAEMを適切に設定する方法についても説明します。

このページ