Category: graphQL

Using GraphQL with XM+EDGE in the Sitecore Demo Portal

Andy Parry

Setting up an XM+EDGE instance in the Sitecore Demo Portal, I encountered a couple of gotchas with querying data via the Experience Edge GraphQL IDE. If you are already familiar with the Portal but are getting the error:

The field 'item' does not exist on the type 'query'

then skip down a couple of paragraphs to the solution.

tl;dr

  • Create a publishing target with database “experienceedge“
  • Check the Publish to Experience Edge checkbox and save the new target
  • Publish the site to your new Edge publishing target and wait a few seconds before querying it, while the schema gets generated
  • PROFIT

The Demo Portal

The Sitecore Demo Portal was created to provide the ability to easily spin up demo sites that you can play with, learn, and showcase. You can very quickly create a complete headless site or commerce instance, as well as an empty XM + Experience Edge instance:


It’s available to Sitecore partners, MVPs, and Sitecore employees, and has been covered a few months back by Jeremy Davis and others, so I won’t go into any detail here, but you can learn more from Jeremy’s blog post or Neil Killen’s blog post.

I was looking to learn more about Experience Edge (and in particular use GraphQL on Edge) as I haven’t had the opportunity to work on a new Edge site for a customer, so I logged in and set up an XM+EDGE demo instance. This deployed surprisingly fast – in a matter of seconds – the team have really supercharged the deployment process since I last tried it a while back.

NOTE: This is NOT XM Cloud, it is a demo instance of XM that uses Experience Edge.

The problem

Once I navigated to the Experience Edge URL at https://edge.sitecorecloud.io/api/graphql/ide and configured the HTTP header for my API key, I tried to run a simple query to retrieve the default Home item:

query{ 
	item(path:"/sitecore/content/home", language:"en"){
    id
  }
}

The result was the following error:

{
  "errors": [
    {
      "message": "The field `item` does not exist on the type `query`.",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ]
    }
  ]
}

The solution

The cause of the error was that I had not yet published my site to Edge, so the schema was not available to query. To fix this, do the following:

Create a new publishing target with Target Database “experienceedge” and check the Publish to Experience Edge checkbox:


Publish your site to that publishing target


Wait until it finishes, refresh your IDE GraphQL IDE window, and wait a few seconds for the schema to be generated, then run your query


More info

https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/install-and-configure-the-experience-edge-connector.html

https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/configure-publishing-targets.html

Using other GraphQL types

Andy Parry

Recently I needed to expose a GraphQL query that accepted a list of Sitecore item IDs and returned the item data for those IDs. I wanted to use the Content Search API for efficiency reasons and because the items might not all be colocated in a folder.

Out of the box, the Sitecore GraphQL Search query does not allow you to do this, but a look into the GraphQL assembly revealed that the ListGraphType might do the job.

The resulting extensions to Sitecore.Services.GraphQL.Content.Queries.SearchQuery looked like this:

public class MySearchQuery : Sitecore.Services.GraphQL.Content.Queries.SearchQuery
    {
        public MySearchQuery()
        {
            Arguments.Add(new QueryArgument<ListGraphType<StringGraphType>>()
            {
                Name = "itemIds",
                Description = "Filter by Sitecore item IDs"
            });
        }

        //override the ContentSearchResults method here...
}

The GraphQL query was then able to pass in an array of item IDs which looked something like this:

query ExtendedSearch {
	searchItemsById(itemIds:["6a6f0d75-2a1d-4f70-b639-622d308d9e11","{EF1848D8-6C43-4E52-A04F-287A12E19D12}"]) {
      results {
      items {
        item {
          id
          field(name:"myItemField"){
            value
          }
        }
      }
    }
  }
}

One thing to note is that, although you are passing in a Guid like “6a6f0d75-2a1d-4f70-b639-622d308d9e11”, the Sitecore GraphQL content search results will come back with a value like “6A6F0D752A1D4F70B639622D308D9E11”.

GraphQL and Sitecore – video series Part 1

Andy Parry

Today I released Part 1 of a video series on using GraphQL with Sitecore. In this first part, I cover getting up and running with GraphQL through:

  • installing Sitecore’s JavaScript Services Server components
  • setting up an endpoint configuration
  • creating and using an API key, and
  • running a query in the UI.

In later videos we’ll dig deeper into configuration, item and search queries, fragments, integrated GraphQL, and extending and customising GraphQL in the context of Sitecore.

Hope that people find it useful.