19 Nov 2018, last update: 30 Jan 2022
Starting with Sitecore JSS Integrated GraphQL
One of the nice things in JSS is GraphQL. Beside just a GraphQL endpoint where the frontend developers can do there ding. There is also Intergrated GraphQL this is where the Sitecore Backend developers can do there cool stuff with GraphQL.
About JSS Integrated GraphQL in a Layout.Renderings, with template /sitecore/templates/JavaScriptServices/Json Rendering
When the Sitecore Layout Service renders a page, it returns a JSON representation of the layout of the page and the data for each component. Normally the component data is a set of fields from the Sitecore datasource item. Integrated GraphQL lets you re-shape this into a GraphQL query result.
Starting with a new query language can take some time also and there are other option to use instead GrapQL if the out of the Box Rendering Contents Resolver does not meet you can create a custom one in the familiar c# language. But with Integrated GraphQL you can do it in Sitecore without creating DLL’s.
Examples
You need other fields than he defaults or you need some data from other items somewhere in the tree.
The config.
Add a graphQLEndpoint to your app and set <compilation debug="true"> in the web.config.
See https://jss.sitecore.net/docs/techniques/graphql/integrated-graphql and https://jss.sitecore.net/docs/techniques/graphql/graphql-overview
Below the Layout folder you can create or adjust Json Rendering items the contain a GraphQL field:
In your JSS app below the /Sitecore/content you can create items that use the Json Rendering with intergrated GraphQL.
You can access the output with an URL somethings like this:
/sitecore/api/layout/render/jss?item=/datasourcetest/&sc_apikey={31482DEC-DC6B-44CD-B46F-216B2F5A3045}&sc_site=MySiteNL&sc_lang=en
The GraphQL query cheat sheet
Examples of GraphQL queries to start with Sitecore JSS Integrated GraphQL or use it as a query cheat sheet.
Get an item by path and show field id and name:
{
item(path:"/") {
id
name
}
}
Custom name for a field, test contain the id value
{
item(path:"/") {
id
name
test : id
}
}
Return some other fields, in this case url is questionable because it is the rootpath from your GraphQL endpoint that could be outside the current site.
{
item(path:"/") {
id
name
displayName
url
icon
path
}
}
Return the name and value from all fields
{
item(path:"/") {
fields {
name
value
}
}
}
Return a specific field, in this case custom field "title"
{
item(path:"/") {
field(name : "title") {
title: value
}
}
}
Use the contexItem, the IntegratedDemoQuery and CurrentContextItem can be any name you like, in this case the CurrentContextItem label is part of the JSON object.
query IntegratedDemoQuery( $contextItem: String!)
{
CurrentContextItem: item(path: $contextItem) {
id
name
}
}
Or this is the same but now in the JSON is the object name ContexItem instead CurrentContextItem
query MyDemoQuery( $contextItem: String!)
{
ContextItem: item(path: $contextItem) {
id
name
}
}
Get the child items
query MyDemoQuery( $contextItem: String!)
{
contextItem: item(path: $contextItem) {
id
name
children{
displayName
url
path
}
}
}
Get the child items from the child items
query MyDemoQuery( $contextItem: String!)
{
vvcontextItem: item(path: $contextItem) {
id
name
children{
id
displayName
url
path
children{
id
displayName
url
path
}
}
}
}
Get the parent item
query MyDemoQuery( $contextItem: String!)
{
contextItem: item(path: $contextItem) {
id
name
parent {
id
name
}
}
}
Use the datasource
query MyDemoQuery( $datasource: String!)
{
dsItem: item(path: $datasource) {
id
name
}
}
Use the datasource and the context item
query MyDemoQuery( $contextItem: String!, $datasource: String!) {
datasource: item(path: $datasource) {
id
name
}
contextItem: item(path: $contextItem) {
id
name
}
}
Use the datasource and the context item and a path
query MyDemoQuery( $contextItem: String!, $datasource: String!) {
datasource: item(path: $datasource) {
id
name
}
contextItem: item(path: $contextItem) {
id
name
}
item(path:"/") {
id
name
}
}
