Getting Started With Sitecore Experience Edge for XM

This blog is intended to all of those who are looking forward to develop ‘Headless’ applications using Sitecore Experience Edge for XM !

3 comments

Experience Edge for XM flow
Image : Sitecore Experience Edge for XM – courtesy doc.sitecore.com

This blog is intended to all of those who are looking forward to develop ‘Headless’ applications using Sitecore Experience Edge for XM ! 🙂

We will see in detail about Sitecore Experience Edge Schema released with ‘Sitecore Headless Rendering 18.0.0’ and The Experience Edge Connector module to publish items from Sitecore CM to highly scalable Sitecore Experience Edge.

Experience Edge for Experience Manager (XM) is an API-based service from Sitecore that gives you globally replicated, scalable access to your Sitecore Experience Platform items, layout, and media. You can use the standard publish tools in XM, but instead of rendering content from a self-hosted Content Delivery environment, Experience Edge provides you a Sitecore-hosted GraphQL API. You can build your solution in any language and pull the content you need to power it with GraphQL.
Read more here : https://doc.sitecore.com/en/developers/101/developer-tools/sitecore-experience-edge-for-xm.html

How to Setup ?

Both Sitecore Experience Edge Schema and The Experience Edge Connector are ‘New features‘ that are part of Sitecore Headless Rendering 18.0.0 !

They can be easily installed by downloading the modules for different topologies listed here or if you’re working with Containers, they are also available as docker images !!

Headless Services : scr.sitecore.com/sxp/modules/sitecore-headless-services-[topology]-assets:18.0-[windows-version]

Experience Edge Connector : scr.sitecore.com/sxp/modules/sitecore-experience-edge-connector-[topology]-assets:18.0-[windows-version]

Using Sitecore Experience Edge Schema

In a normal Sitecore development scenario, Sitecore Content Delivery instance delivers contents and while working with Headless services – contents are served using ‘{cd}/api/layout/render/jss’ endpoint. To facilitate local development, Experience Edge Schema has been created.

Image : sitecore.services.graphql.edgecontent.config file

As you can see in above image – sitecore.services.graphql.edgecontent.config has configuration for ‘edge’ endpoint which is ‘/sitecore/api/graph/edge’ which serves specific schema : “/sitecore/api/GraphQL/defaults/content/schemaProviders/edgeContent“.

The same config file has details of edgeContent Schema – which is configured to server different graphQL queries.

                            <edgeContent type="Sitecore.Services.GraphQL.EdgeSchema.EdgeSchemaProvider, Sitecore.Services.GraphQL.EdgeSchema">
                                <!-- 
                                    The template predicate defines which templates will have GraphQL types generated for them. This is NOT a security measure - all fields
                                    that the API key user/authenticated user can access can be queried by name - but can be used to limit the scope of your GraphQL schema.
                                -->
                                <templates type="Sitecore.Services.GraphQL.Content.TemplateGeneration.Filters.StandardTemplatePredicate, Sitecore.Services.GraphQL.Content">
                                    <database>$(1)</database>
                                    <paths hint="list:AddIncludedPath">
                                        <foundation>/sitecore/templates/Foundation</foundation>
                                        <feature>/sitecore/templates/Feature</feature>
                                        <project>/sitecore/templates/Project</project>
                                        <userdefined>/sitecore/templates/User Defined</userdefined>
                                    </paths>
                                    <fieldFilter type="Sitecore.Services.GraphQL.Content.TemplateGeneration.Filters.StandardFieldFilter, Sitecore.Services.GraphQL.Content">
                                        <exclusions hint="raw:AddFilter">
                                            <!-- 
                                                Remove system fields from the GraphQL types in the strongly typed API (e.g. __Layout)
                                                Wildcards are allowed.
                                            -->
                                            <exclude name="__*" />
                                            <!--
                                                You can also exclude fields from the schema specifically by field ID
                                            <exclude fieldId="{8FB875EB-3AD3-44FF-87E1-998370CC3199}" />-->
                                        </exclusions>
                                    </fieldFilter>
                                </templates>

                                <!-- 
                                    Define the GraphQL root object for the schema (queries, mutations, and subscriptions)
                                    You may use `resolve=true` to activate dependency injection on root fields.
                                    All root fields must inherit from FieldType (EventStreamFieldType for subscriptions)
                                    Fields may optionally implement IContentSchemaRootFieldType to get a Database instance (automatic property is expected)
                                -->
                                <queries hint="raw:AddQuery">
                                    <query name="item" type="Sitecore.Services.GraphQL.EdgeSchema.Queries.ItemQuery, Sitecore.Services.GraphQL.EdgeSchema" />
                                    <query name="layout" type="Sitecore.Services.GraphQL.EdgeSchema.Queries.LayoutQuery, Sitecore.Services.GraphQL.EdgeSchema" />
                                    <query name="search" type="Sitecore.Services.GraphQL.EdgeSchema.Queries.SearchQuery, Sitecore.Services.GraphQL.EdgeSchema" />
                                </queries>
                                <fieldTypeMapping ref="/sitecore/api/GraphQL/defaults/content/fieldTypeMappings/standardTypeMapping" />
                            </edgeContent>


It supports ‘item’,’layout’ & ‘search’ GraphQL Query Types which are served through dedicated ‘Sitecore.Services.GraphQL.EdgeSchema’ assembly.

As you have already noticed, it has a new query type called 'layout' which will return Layout Response for a page ! This is most interesting part as it is built to develop apps using Layout response which is served through Experience edge schema.

Trying out a simple query to get rendered information of page shows how similar it is compared to the JSS endpoints response.

JSS - Response


GraphQL - EdgeContent : Layout Rendered Response based on Below query.query LayoutRequest($site: String!, $routePath: String!, $language: String!){
layout(site: $site, routePath: $routePath, language: $language) {
item {
rendered
}
}
}

Querying Sitecore Experience Edge Schema

Just like other GraphQL endpoints, querying Experience Edge Schema is simple ! You can use GraphQL clients to query and test it out.

Query Endpoint : https://cd.sc10.localhost/sitecore/api/graph/edge?sc_apikey={e2987031-fed8-4d42-9bb5-57b8e1174d34} –> as you can notice, the query endpoint has sc_apikey is required to query edge point.

Image : Querying Edge Schema using GraphQL Playground

Above query returns rendered information of a page which is again resolved using Layout Query ! As we discussed above, it should support – Item / Layout & Search queries, which I would say sufficient enough for building Headless applications.

I hope you’ve got an idea on how Sitecore Experience Schema works ! In the second part of this article, we can see in detail about Experience Edge Connector 🙂 !!

3 comments on “Getting Started With Sitecore Experience Edge for XM”

  1. Hi Ram,
    I am trying to install Experience Edge connector for Headless 19 but getting error.
    not sure what needs to be done for proper installation.
    On CM service docker file I just added
    COPY –from=experience_edge_service C:\module\cm\content C:\inetpub\wwwroot

    Not sure there are some more config required on other services too e.g. Solr, mssql-int

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.