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