Tailwind Logo

LinkList で利用するリンク一覧の上限の確認

XM CloudHeadless SXA

公開日: 2024-09-18

リンクリストを利用することで、手軽に関連リンクをページに追加することができます。今回はこのリンクリストで利用できるアイテムの上限について確認をしていきます。

リンクリストの動作確認

まずリンクリストを CMS 側で新しく作成をして、リンク一覧を作成します。今回は 15 個のリンクリストが入っている一覧を作成してみました。

linklist01.png

これを実際にページに配置をすると以下のように表示されます。

linklist02.png

アイテムを15個作成しているのですが、10個しか表示されていません。

原因を調べる

このリンクリストがどういう風に動作しているのかを確認します。このリンクリストのための Rendering の定義は、/sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Navigation/LinkList となっています。

linklist03.png

このアイテムでは GraphQL が定義されており、指定したデータソースのアイテムの下にある項目 children を見るようにしているのが分かります。この GraphQL のクエリに対して値を渡して取得する結果を Postman で確認をすると以下のようになります。

linklist04.png

このように、デフォルトでは子アイテムを取得する場合には、 10 取得するのが標準の設定となっています。これを増やす場合、first: 20 とクエリを追加することで標準以上の数のデータを取得できるようになります。

GraphQL
query TitleQuery($datasource: String!, $language: String!) {
  datasource: item(path: $datasource, language: $language) {
    children (first: 20){
      results {
        field(name: "Link") {
          link: jsonValue
        }
      }
    }
    field(name: "Title") {
      title: jsonValue
    }
  }
}

Postman で実行すると、15 個のデータを取得できるようになりました。

linklist05.png

環境に反映させる

上記で動作したクエリを Link List のアイテムに対して適用して、先ほど配置したページにアクセスをすると 15 個のアイテムが表示されるようになりました。

linklist06.png

まとめ

以前にパンくずリストを作成する際にも、レンダリングに GraphQL の定義をしてデータの取得、ページで表示する形で実装できます。今回は、仕組み的にどこで問題があるのか?という形で Postman を利用してデータの取得の確認、そこを変更するだけで済みました。

関連リンク

関連タグ