---
title: "クエリの例"
slug: "query-examples"
abstract: "Experience Edge for XMでアイテムを問い合わせる例のクエリ。"
---
# クエリの例

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

> !重要このトピックのほとんどの例クエリはStyleguideのサンプルサイトから派生しています。アイテムIDやパスはインポートやソリューションによって異なります。

> !重要もしサイトがフォールバック言語をサポートしている場合は、開始前にExperience Edgeコネクターで [出版言語のフォールバックを有効にし](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/enable-publishing-language-fallback.html "Enable publishing language fallback") てください。

## IDやパスでアイテムを取得する

パスやIDでコンテンツツリー内のどこにでもアイテムをクエリし、フィールドやその他のプロパティを読み取ることができます。インラインフラグメントを使って、アイテムを投影されたデータテンプレートタイプに、フィールドをフィールドタイプにキャストすることもできます。

### クエリ { .notintoc }

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
 }
 }
 }
}

### 結果 { .notintoc }

{
 "data": {
 "item": {
 "pageTitle": {
 "value": "Welcome to Sitecore JSS"
 },
 "field": {
 "value": "Welcome to Sitecore JSS"
 }
 }
 }
}
## 複数のパスでアイテムを絞り込みましょう

複数のパスに基づいてアイテムを絞り込むことができます。このクエリの例は、以下のサイト構造を前提としています:

![Content tree highlighting the items used in this example.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/site-structure.png)

/home/graphqlとhome/styleguide/Page Componentsの項目のUUIDがそれぞれ0C6F4AAF-DD7E-5FAF-B9B0-61070D496055とAB99BA2B-B606-51E3-BAD9-FD8358DE1333を持っていると仮定します。/home/graphqlでない項目と子孫/home、home/styleguide/Page Components、またはその子ノードを取得したいのです。次のクエリでは、NCONTAINS演算子を用いてこれらの項目とその子ノードの経路を結果から除外します。

### クエリ { .notintoc }

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
       }
     }
   }
 }

### 結果 { .notintoc }

検索クエリの結果には、/home/graphqlやhome/styleguide/Page Componentsのパスやその子孫を含む項目は含まれず、/home項目と残りの子項目が返されます。

{
  "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用のアイテムレイアウトを取得する

Headless SDKで最もよく使われるもので、サイト名とHTTPアドレスでアイテムを見つけ、フレームワーク固有のSitecoreプレースホルダー実装でレンダリングするためのレイアウトサービスの出力を取得できます。

### クエリ { .notintoc }

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

### 結果 { .notintoc }

{
 "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[のアイテムバケット](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-platform/item-buckets.html)を扱う際、一般的な要件として、特定のテンプレートから派生するすべてのアイテムをそのバケット内にページ付けすることが求められます。以下の検索クエリはこれらのユースケースに役立ちます。

### クエリ { .notintoc }

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
 }
}

### 結果 { .notintoc }

{
 "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クエリを使ってサイトのルートアイテムを見つけることは可能です。

### クエリ { .notintoc }

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

### 結果 { .notintoc }

{
 "data": {
 "layout": {
 "item": {
 "homeItemPath": "/sitecore/content/Experience-Edge/home",
 "contentRoot": {
 "id": "5AAA894246145088B7AD604B4D177B39",
 "path": "/sitecore/content/Experience-Edge"
 }
 }
 }
 }
}
## すべてのサイトパス/ページを取得してください

Experience Edgeスキーマ内のsearchクエリを使って、特定のパス下にあるレイアウトデータを含むすべてのアイテムを見つけることができます。これは、例えば静的サイトジェネレーターのパス取得やサイトマップの作成に役立ちます。検索クエリの結果はページ分けされており、デフォルトでは10件のみの結果を返します。結果をページ付けするには、firstとafterクエリ引数を付けたendCursorプロパティを使わなければなりません。

### クエリ { .notintoc }

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 the value from the "endCursor" field in "pageOne" query results.
 # you can do this by using either a query without an "after" parameter, or a query with an empty "after" parameter (after: "")
 after: "Mg=="
 ) {
 total
 pageInfo {
 endCursor
 hasNext
 }
 results {
 url {
 path
 }
 }
 }
}

### 結果 { .notintoc }

{
 "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"
 }
 }
 
 }
 }
}
## 建設現場ナビゲーション

このサンプルクエリは [、サイトのルートを見つける](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/query-examples.html#UUID-b9fffbd6-a6da-1fec-f4b4-7dc3a8a9d65c_section-idm4615071291214432428467102955 "Get the root item of a site") こととアイテムの子をトラバースする機能を組み合わせています。 hasLayout引数を使ってレイアウト(ナビゲート可能なページ)を持つアイテムのみを見つけ、includeTemplateIds引数を使って(ベースの)データテンプレートでフィルタリングできます。

### クエリ { .notintoc }

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
 }
 }
 }
 }
 }
 }
}

### 結果 { .notintoc }

{
 "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で(ベースの)データテンプレートでフィルタリングします。

### クエリ

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
 }
 }
}

### 結果

{
 "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 Headless SDKでアイテムフィールドを使いましょう

Sitecoreの各種ヘッドレスSDKには、フィールド値のレンダリング用のヘルパーが含まれています。これらのヘルパーは、複雑なフィールド(画像やリンクなど)やインライン編集の文脈で編集可能な値のレンダリングを支援します。Experience Edgeスキーマ内のアイテムフィールドには、これらのフィールドヘルパーと互換性のある形式でフィールドを出力するものjsonValueが含まれます。

例えば、以下のリンクフィールドはLinkフィールドヘルパーを使ってReactまたはNext.jsでレンダリングできます。

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

### クエリ

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
 }
 }
 }
}

### 結果

{
 "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"
 }
 }
 }
 }
 }
}