By installing the Headless Service for Sitecore XM, data can be retrieved using GraphQL. In this article, we will show you how the data can be retrieved.
For the current demo environment
By using GraphQL to retrieve data, it is possible to retrieve data that you want to use on your website. By default, accessing the server with the following URL will display the screen.
- https://servername/sitecore/api/graph/edge/ui
Set the API key in HTTP HEADERS in the lower left corner. The description procedure is as follows
JSON
{
"sc_apikey": "{110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}"
}Run a sample
Let's run some of the samples shown on the web site. First, we get the title of the home item.
GraphQL
query {
# path can be an item tree path or GUID-based id
item(path: "/sitecore/content/sitecoredemo-jp/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
}
}
}
}The results are as follows
JSON
{
"data": {
"item": {
"pageTitle": {
"value": "Welcome to Sitecore JSS"
},
"field": {
"value": "Welcome to Sitecore JSS"
}
}
}
}
You can search for items by site name and HTTP URL, retrieve the output from the layout service, and render it with a framework-specific implementation of Sitecore placeholders.
GraphQL
query {
layout(site: "sitecoredemo-jp", routePath: "/", language: "en") {
item {
rendered
}
}
}The results are as follows
JSON
{
"data": {
"layout": {
"item": {
"rendered": {
"sitecore": {
"context": {
"pageEditing": false,
"site": {
"name": "sitecoredemo-jp"
},
"pageState": "normal",
"language": "en",
"itemPath": "/"
},
"route": {
"name": "home",
"displayName": "home",
"fields": {
"pageTitle": {
"value": "Welcome to Sitecore JSS"
},
"PageDescription": {
"value": ""
}
},
"databaseName": "master",
"deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
"itemId": "70673cb7-453a-5695-b49b-ad3db8b8a2de",
"itemLanguage": "en",
"itemVersion": 1,
"layoutId": "5163b1da-fe74-5a97-8260-8913e2c24b18",
"templateId": "49d6a53c-8c9b-570e-baf6-27a31b4363bc",
"templateName": "App Route",
"placeholders": {
"jss-main": [
{
"uid": "2c4a53cc-9da8-5f51-9d79-6ee2fc671b2d",
"componentName": "ContentBlock",
"dataSource": "{806A7A34-B8A3-5D89-9DD4-FDFC3F39192E}",
"fields": {
"heading": {
"value": "Welcome to Sitecore JSS Demo"
},
"content": {
"value": "<p>Thanks for using JSS!! Here are some resources to get you started:</p>\n\n<h3><a href=\"https://jss.sitecore.com\" 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"
}
}
}
]
}
}
}
}
}
}
}
}
This is the third test, this time to try to get the path to the site.
GraphQL
query {
layout(site: "sitecoredemo-jp", routePath: "/", language: "en") {
item {
homeItemPath: path
contentRoot: parent {
id
path
}
}
}
}The results are as follows
JSON
{
"data": {
"layout": {
"item": {
"homeItemPath": "/sitecore/content/sitecoredemo-jp/home",
"contentRoot": {
"id": "0822F5B0382E5788BC4812BF665DAB56",
"path": "/sitecore/content/sitecoredemo-jp"
}
}
}
}
}
For the above three, if the site values, paths, etc. are different, adjust the query section and execute.
Summary
The data stored in Sitecore can now be retrieved as JSON data using GraphQL. We will introduce how to use this in the future.