クエリの例

Version: 20.x
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このトピックでは、Experience Edge GraphQL スキーマのクエリを実行して一般的なクエリのニーズを満たす方法の例について説明します。

重要

このトピックに含まれるサンプル クエリのほとんどは、Styleguide サンプル サイトから派生したものです。アイテム ID とパスは、インポートやソリューションによって異なります。

ID またはパスによるアイテムの取得

[en] You can query items anywhere in your content tree by path or ID to read their fields and other properties. You can use inline fragments to cast items to their projected data template type and fields to their field type.

クエリ

RequestResponse
query {
  # path can be an item tree path or GUID-based id
  item(path: "/sitecore/content/Experience-Edge/home", language: "en") {
    # items can be cast to a Template type with inline fragments
    ... on AppRoute {
      pageTitle {
        value
      }
    }
    # fields can be cast to a Field type with inline fragments
    field(name: "pageTitle") {
      ... on TextField {
        value
      }
    }
  }
}

結果

RequestResponse
{
  "data": {
    "item": {
      "pageTitle": {
        "value": "Welcome to Sitecore JSS"
      },
      "field": {
        "value": "Welcome to Sitecore JSS"
      }
    }
  }
}

[en] Get items filtered by multiple paths

[en] You can filter items based on multiple paths. This query example assumes the following site structure:

[en] Content tree highlighting the items used in this example.

[en] Assume that the /home/graphql and home/styleguide/Page Components items have the UUIDs 0C6F4AAF-DD7E-5FAF-B9B0-61070D496055 and AB99BA2B-B606-51E3-BAD9-FD8358DE1333, respectively. You want to get the /home items and descendants that are not /home/graphql and home/styleguide/Page Components or their children. The following query uses the NCONTAINS operator to exclude the path of these items and their children from the result.

[en] Query

RequestResponse
query {
  pageOne: search(
     where: {
       AND: [
         {
           name: "_path"
           value: "54C8E9B5-0B2C-5363-8FA6-D32A3A302F51"
           operator: CONTAINS
         }
         {
           AND: [
             {
               name: "_path"
               value: "0C6F4AAF-DD7E-5FAF-B9B0-61070D496055"
               operator: NCONTAINS
             }
             {
               name: "_path"
               value: "AB99BA2B-B606-51E3-BAD9-FD8358DE1333"
               operator: NCONTAINS
             }
           ]
         }
       ]
     }
     # defaults to 10
     first: 10
   ) {
     total
     pageInfo {
       endCursor
       hasNext
     }
     results {
       url {
         path
       }
     }
   }
 }

[en] Result

[en] The result of the search query does not contain items with the paths /home/graphql and home/styleguide/Page Components or any of their descendants but returns the /home item and the remaining child items.

RequestResponse
{
  "data": {
    "pageOne": {
      "total": 5,
      "pageInfo": {
        "endCursor": "NQ==",
        "hasNext": false
      },
      "results": [
        {
          "url": {
            "path": "/styleguide/custom-route-type"
          }
        },
        {
          "url": {
            "path": "/styleguide"
          }
        },
        {
          "url": {
            "path": "/Page-Components/home-jss-main-ContentBlock-1"
          }
        },
        {
          "url": {
            "path": "/Page-Components"
          }
        },
        {
          "url": {
            "path": "/"
          }
        }
      ]
    }
  }
}

URL のアイテム レイアウトの取得

ほとんどの場合、ヘッドレス SDK で使用されます。アイテムをサイト名と HTTP URL で検索し、フレームワーク固有の Sitecore プレースホルダー実装によってレンダリングするためにレイアウト サービス出力を取得できます。

クエリ

RequestResponse
query {
  layout(site: "experienceedge", routePath: "/", language: "en") {
    item {
      rendered
    }
  }
}

結果

RequestResponse
{
  "data": {
    "layout": {
      "item": {
        "rendered": {
          "sitecore": {
            "context": {
              "pageEditing": false,
              "site": {
                "name": "experienceedge"
              },
              "pageState": "normal",
              "language": "en",
              "itemPath": "/"
            },
            "route": {
              "name": "home",
              "displayName": "home",
              "fields": {
                "pageTitle": {
                  "value": "Welcome to Sitecore JSS"
                }
              },
              "databaseName": "web",
              "deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
              "itemId": "2bde2083-5542-5569-ac5e-f1f42e29f75a",
              "itemLanguage": "en",
              "itemVersion": 1,
              "layoutId": "714096fc-3998-52cf-b87a-951fc7ce39d3",
              "templateId": "e34d8c4f-7e6c-560c-be24-e4d1fcdb16d8",
              "templateName": "App Route",
              "placeholders": {
                "jss-main": [
                  {
                    "uid": "2c4a53cc-9da8-5f51-9d79-6ee2fc671b2d",
                    "componentName": "ContentBlock",
                    "dataSource": "{CC3A044C-776B-5423-9BEA-CC5C2EDA8C9B}",
                    "fields": {
                      "heading": {
                        "value": "Welcome to Sitecore JSS"
                      },
                      "content": {
                        "value": "<p>Thanks for using JSS!! Here are some resources to get you started:</p>\n\n<h3><a href=\"https://jss.sitecore.net\" rel=\"noopener noreferrer\">Documentation</a></h3>\n<p>The official JSS documentation can help you with any JSS task from getting started to advanced techniques.</p>\n\n<h3><a href=\"/styleguide\">Styleguide</a></h3>\n<p>The JSS styleguide is a living example of how to use JSS, hosted right in this app.\nIt demonstrates most of the common patterns that JSS implementations may need to use,\nas well as useful architectural patterns.</p>\n\n<h3><a href=\"/graphql\">GraphQL</a></h3>\n<p>JSS features integration with the Sitecore GraphQL API to enable fetching non-route data from Sitecore - or from other internal backends as an API aggregator or proxy.\nThis route is a living example of how to use an integrate with GraphQL data in a JSS app.</p>\n\n<div class=\"alert alert-dark\">\n  <h4>This app is a boilerplate</h4>\n  <p>The JSS samples are a boilerplate, not a library. That means that any code in this app is meant for you to own and customize to your own requirements.</p>\n  <p>Want to change the lint settings? Do it. Want to read manifest data from a MongoDB database? Go for it. This app is yours.</p>\n</div>\n\n<div class=\"alert alert-dark\">\n  <h4>How to start with an empty app</h4>\n  <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>\n  <ol>\n    <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>\n    <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>\n    <li>Delete <code>/data/component-content/Styleguide</code></li>\n    <li>Delete <code>/data/content/Styleguide</code></li>\n    <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>\n    <li>Delete <code>/data/dictionary/*.yml</code></li>\n  </ol>\n</div>\n"
                      }
                    }
                  }
                ]
              }
            }
          }
        }
      }
    }
  }
}

アイテム バケット内のアイテムのページネーション

Sitecore アイテム バケットを使用する場合、一般的な要件として、そのバケット内の特定のテンプレートから派生したすべてのアイテムにページネーションを行う必要があります。次の検索クエリは、このようなユース ケースに役立ちます。

クエリ

RequestResponse
fragment bucketItemFields on Item {
  ... on AppRoute {
    pageTitle {
      value
    }
  }
  url {
    path
  }
}

query {
  search(
    where: {
      AND: [
        {
          name: "_templates"
          value: "0929f436c3f3500a9f8bd1c57a67a192"
          operator: CONTAINS
        }
        {
          name: "_path"
          value: "7ab00eca411249818420666fc9110faf"
          operator: CONTAINS
        }
      ]
    }
    first: 5
    orderBy: { name: "pageTitle", direction: ASC }
  ) {
    results {
      ...bucketItemFields
    }
    pageInfo {
      endCursor
      hasNext
    }
    total
  }
}

結果

RequestResponse
{
  "data": {
    "search": {
      "results": [
        {
          "pageTitle": {
            "value": "Route A"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-A"
          }
        },
        {
          "pageTitle": {
            "value": "Route B"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-B"
          }
        },
        {
          "pageTitle": {
            "value": "Route C"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-C"
          }
        },
        {
          "pageTitle": {
            "value": "Route D"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-D"
          }
        },
        {
          "pageTitle": {
            "value": "Route E"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/13/Route-E"
          }
        }
      ],
      "pageInfo": {
        "endCursor": "NQ==",
        "hasNext": true
      },
      "total": 26
    }
  }
}

サイトのルート アイテムの取得

Experience Edge スキーマでは現在、サイトとそのルート アイテムのクエリは実行できませんが、layout クエリを使用すればサイトのルート アイテムを検索できます。

クエリ

RequestResponse
query {
  layout(site: "experienceedge", routePath: "/", language: "en") {
    item {
      homeItemPath: path
      contentRoot: parent {
        id
        path
      }
    }
  }
}

結果

RequestResponse
{
  "data": {
    "layout": {
      "item": {
        "homeItemPath": "/sitecore/content/Experience-Edge/home",
        "contentRoot": {
          "id": "5AAA894246145088B7AD604B4D177B39",
          "path": "/sitecore/content/Experience-Edge"
        }
      }
    }
  }
}

すべてのサイト パスおよびページの取得

Experience Edge スキーマの search クエリを使用して、特定のパスにあり、レイアウトを持つすべてのアイテムを検索できます。これは、静的サイト ジェネレーターのパスを取得する場合や、サイト マップを作成する場合などに便利です。検索クエリの結果はページネーションが行われ、既定で返される結果は 10 件のみです。結果のページネーションを行うには、endCursor プロパティを first および after クエリ属性とともに使用する必要があります。

クエリ

RequestResponse
query {
  pageOne: search(
    where: {
      AND:[
        {
          name: "_path",
          value: "5AAA894246145088B7AD604B4D177B39",
          operator: CONTAINS
        },
        { name: "_language",  value: "en" },
        { name: "_hasLayout", value: "true" }
      ]
    }
    # defaults to 10
    first: 2
  ) {
    total
    pageInfo {
      endCursor
      hasNext
    }
    results {
      url {
        path
      }
    }
  },
  
  # this would be a subsequent query from your client
  pageTwo: search(
    where: {
      AND:[
        {
          name: "_path",
          value: "5AAA894246145088B7AD604B4D177B39",
          operator: CONTAINS
        },
        { name: "_language",  value: "en" },
        { name: "_hasLayout", value: "true" }
      ]
    }
    first: 2,
    # obtained from "page one" query results
    after: "Mg=="
  ) {
    total
    pageInfo {
      endCursor
      hasNext
    }
    results {
      url {
        path
      }
    }
  }
}

結果

RequestResponse
{
  "data": {
    "pageOne": {
      "total": 6,
      "pageInfo": {
        "endCursor": "Mg==",
        "hasNext": true
      },
      "results": [
        {
          "url": {
            "path": "/"
          }
        },
        {
          "url": {
            "path": "/graphql"
          }
        }
      ]
    },
    "pageTwo": {
      "total": 6,
      "pageInfo": {
        "endCursor": "NA==",
        "hasNext": true
      },
      "results": [
        {
          "url": {
            "path": "/graphql/sample-1"
          }
        },
        {
          "url": {
            "path": "/graphql/sample-2"
          }
        }
      ]
    }
  }
}

サイト ナビゲーションの作成

このサンプル クエリは、サイト ルートの検索を、アイテムの子をトラバースする機能と組み合わせたものです。レイアウトがあるアイテム (ナビゲート可能なページ) のみを検索するには hasLayout 引数を使用し、(ベース) データ テンプレートでフィルタリングするには includeTemplateIds 引数を使用します。

クエリ

RequestResponse
fragment navigationFields on Item {
  ... on AppRoute {
    pageTitle {
      value
    }
  }
  url {
    path
  }
}

query {
  layout(site: "experienceedge", routePath: "/", language: "en") {
    item {
      ...navigationFields
      children(hasLayout: true, includeTemplateIDs: "e34d8c4f7e6c560cbe24e4d1fcdb16d8") {
        results {
          ...navigationFields
          children(hasLayout: true, includeTemplateIDs: "e34d8c4f7e6c560cbe24e4d1fcdb16d8") {
            results {
            	...navigationFields
            }
          }
        }
      }
    }
  }
}

結果

RequestResponse
{
  "data": {
    "layout": {
      "item": {
        "pageTitle": {
          "value": "Welcome to Sitecore JSS"
        },
        "url": {
          "path": "/"
        },
        "children": {
          "results": [
            {
              "pageTitle": {
                "value": "GraphQL | Sitecore JSS"
              },
              "url": {
                "path": "/graphql"
              },
              "children": {
                "results": [
                  {
                    "pageTitle": {
                      "value": "Sample 1 Page Title"
                    },
                    "url": {
                      "path": "/graphql/sample-1"
                    }
                  },
                  {
                    "pageTitle": {
                      "value": "Sample 2 Page Title"
                    },
                    "url": {
                      "path": "/graphql/sample-2"
                    }
                  }
                ]
              }
            },
            {
              "pageTitle": {
                "value": "Styleguide | Sitecore JSS"
              },
              "url": {
                "path": "/styleguide"
              },
              "children": {
                "results": [
                  {
                    "pageTitle": {
                      "value": "Custom Route Type | Sitecore JSS"
                    },
                    "url": {
                      "path": "/styleguide/custom-route-type"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    }
  }
}

ページの階層リンクの作成

アイテム グラフ型で ancestors フィールドを使用して、階層リンク ナビゲーションを作成できます。レイアウトがあるアイテム (ナビゲート可能なページ) のみを検索するには hasLayout 引数を使用し、(ベース) データ テンプレートでフィルタリングするには includeTemplateIds を使用します。

クエリ

RequestResponse
fragment breadcrumbFields on Item {
  ... on AppRoute {
    pageTitle {
      value
    }
  }
  url {
    path
  }
}

query {
  # Assume item id is available on page
  item(path: "e2c5c62f42a95b17bc0e71bc9193db9a", language: "en") {
    ...breadcrumbFields
    ancestors(
      hasLayout: true
      includeTemplateIDs: "e34d8c4f7e6c560cbe24e4d1fcdb16d8"
    ) {
      ...breadcrumbFields
    }
  }
}

結果

RequestResponse
{
  "data": {
    "item": {
      "pageTitle": {
        "value": "Custom Route Type | Sitecore JSS"
      },
      "url": {
        "path": "/styleguide/custom-route-type"
      },
      "ancestors": [
        {
          "pageTitle": {
            "value": "Styleguide | Sitecore JSS"
          },
          "url": {
            "path": "/styleguide"
          }
        },
        {
          "pageTitle": {
            "value": "Welcome to Sitecore JSS"
          },
          "url": {
            "path": "/"
          }
        }
      ]
    }
  }
}

Sitecore ヘッドレス SDK でのアイテム フィールドの使用

[en] The various Sitecore Headless SDKs all contain helpers for rendering field values. These helpers assist with rendering complex fields (such as images or links) and editable values in the context of inline editing. Item fields in the Experience Edge schema include jsonValue that outputs the field in a format compatible with these field helpers.

[en] For example, the following link field could be rendered in React or Next.js using the Link field helper:

RequestResponse
<Link field={data.linkFieldExample?.externalLink?.jsonValue} />

クエリ

RequestResponse
query {
  richTextFieldExample: item(path: "d979794f76fd51829f3ece48d16dc36c", language: "en") {
    displayName
    ... on StyleguideFieldUsageRichText {
      sample {
        jsonValue
      }
    }
  }
  imageFieldExample: item(path: "c05be0b464885343b5670145b6815d03", language: "en") {
    displayName
    ... on StyleguideFieldUsageImage {
      sample1 {
        jsonValue
      }
    }
  }
  linkFieldExample: item(path: "d299e65e1f6c5ea3b71381c8e2f85baf", language: "en") {
    displayName
    ... on StyleguideFieldUsageLink {
      externalLink {
        jsonValue
      }
    }
  }
}

結果

RequestResponse
{
  "data": {
    "richTextFieldExample": {
      "displayName": "Styleguide-FieldUsage-RichText-3",
      "sample": {
        "jsonValue": {
          "value": "<p>This is a sample rich text field. <mark>HTML is always supported.</mark> In Sitecore, editors will see a WYSIWYG editor for these fields.</p>"
        }
      }
    },
    "imageFieldExample": {
      "displayName": "Styleguide-FieldUsage-Image-4",
      "sample1": {
        "jsonValue": {
          "value": {
            "src": "https://cm.experience_edge.localhost/-/media/experienceedge/data/media/img/sc_logo.png?iar=0&hash=F4F969FF95009AE0A80FA094C497ED25",
            "alt": "Sitecore Logo"
          }
        }
      }
    },
    "linkFieldExample": {
      "displayName": "Styleguide-FieldUsage-Link-9",
      "externalLink": {
        "jsonValue": {
          "value": {
            "href": "https://www.sitecore.com",
            "text": "Link to Sitecore",
            "url": "https://www.sitecore.com",
            "linktype": "external"
          }
        }
      }
    }
  }
}

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、