JSS Integrated GraphQL

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.JSS Integrated GrapQL

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

JSS JSON example

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