JSS Integrated GraphQL Queries

Created: 21 Dec 2018, last update: 30 Jan 2022

Sitecore JSS Integrated GraphQL Queries

Today it is useful to master GraphQL as Sitecore Backend Developer.
See Starting with Sitecore JSS Integrated GraphQL

In this blog I share some of my GrapQL queries, about fragments, includes, search, Droptree / Droplink field and Treelist field.

The nice thing about integrated GraphQL is that you can do it in Sitecore no need to create C# dlls. But the performance test I did with GraphQL vs Content resolver ended in GraphQL is 3 times slower. It is also sometimes difficult to make certain functionality in GraphQL due to the lack of operators, no manipulating string values and no parameterized fragments. You could do more with XSLT.

First some of the samples here, I use a template called "jsspage" with a title, text, myDroptree, myTreelist field. With GraphQL you can use Strongly-typed templates and fields, this is automatically done by JSS, so just create a Sitecore template and you can use it Strongly-Typed in GraphQL.

Example of Strongly-typed template Jsspage with a Droptree and Treelist
Note: for the text field, I get the editable this mean the value, but when in editing mode it returns something that can be use in the Experience editor.

query MyDemoQuery( $contextItem: String!) 
{
    contextItem: item(path: $contextItem) {
	...on Jsspage {
           text {
              editable
           }
           myDroptree {
             id
             targetItem {
               displayName
               children {
                  name
               }
             }
          }
         myTreelist {
            editable
            targetItems {
              name
            }
         }
     }
 }
}



Fragments
Fragments are nice if you need multiple times the same code.

query MyDemoQuery( $contextItem: String!) 
{
  contextItem: item(path: $contextItem) {
  ...mySelectedFields 
    parent {
        ...mySelectedFields 
        parent {
            ...mySelectedFields 
            parent {
               ...mySelectedFields 
           } 
        } 
    }    
  }
}


fragment mySelectedFields on Item {
  name
  id
  path
}

Includes
The lake of parameters with fragments and functionality makes the include statement not powerful in Integrated GraphQL. There is no way to set dynamic a variable so it hard coded in the Query call. Here is an example:

query MyDemoQuery( $contextItem: String!, $more: Boolean = true) 
{
 
  contextItem: item(path: $contextItem) {
  ...mySelectedFields
    parent @include (if: $more) {
        ...mySelectedFields
        parent {
            ...mySelectedFields
            parent {
               ...mySelectedFields
           } 
        } 
    }    
  }
}


fragment mySelectedFields on Item {
  name
  id
  displayName 
  url(options: { disableLanguageEmbedding: true })
}

Search
You can call the Sitecore Content Search API in GraphQL this if very cool. To get it working in JSS 11 you need at least use something in the fieldsEqual. See Sitecore JSS Integrated GraphQL Upgrade and Sitecore JSS GraphQL.ExecutionError: Error trying to resolve search. System.Collections.Generic.KeyNotFoundException.

{
  search(
    fieldsEqual:[{name:"_content", value:"home" }, {name:"_fullpath", value:"/sitecore/content*"}]
    	) {
    results {
      items {
        item {
          id
          name
          path
          url
        }
      }
    }
    results {
      totalCount
    }
  }
}

 

Example with giving a specific index

{
  search(index:"sitecore_web_index" rootItem:"/sitecore/content"
    fieldsEqual:[{name:"_content", value:"home" }]
    	) {
    results {
      items {
        item {
          id
          name
          path
          url
        }
      }
    }
    results {
      totalCount
    }
  }
}