Using Next.js with the RestLayoutService

Question

I've been doing some experiments with the XM-Cloud-Introduction GitHub repo. I followed all the Running the Repository steps for Full Local Development Mode. It's working and I also run the SugconAnzSxa local with npm run start:connected from that folder.

This project uses the LayoutServiceFactory, but somehow it only seems to work when it returns the GraphQLLayoutService. When I try the RestLayoutService I get different results.

Here are both results from the Speakers page:

GraphQLLayoutService

{
  sitecore: {
    context: {
      pageEditing: false,
      site: { name: 'sugconanz' },
      pageState: 'normal',
      language: 'en',
      itemPath: '/Speakers'
    },
    route: {
      name: 'Speakers',
      displayName: 'Speakers',
      fields: {
        Content: { value: '' },
        Title: { value: 'Speakers' },
        NavigationTitle: { value: 'Speakers' },
        NavigationClass: null,
        NavigationFilter: [],
        'Page Design': null,
        MetaCustomAttributes: { value: '' },
        MetaKeywords: { value: '' },
        MetaDescription: { value: '' },
        OgType: { value: '' },
        OgDescription: { value: '' },
        OgImage: { value: {} },
        OgTitle: { value: '' },
        ProfileAttributes: { value: '' }
      },
      databaseName: 'master',
      deviceId: 'fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3',
      itemId: 'b55d4ded-a755-4a3d-92ce-5d90712b737c',
      itemLanguage: 'en',
      itemVersion: 1,
      layoutId: '96e5f4ba-a2cf-4a4c-a4e7-64da88226362',
      templateId: '36cad6cf-d418-43ca-bc57-656e44069116',
      templateName: 'Page',
      placeholders: {
        'headless-header': [
          {
            uid: '22f98a7c-8784-4968-9da6-29c4e6506a20',
            componentName: 'PartialDesignDynamicPlaceholder',
            dataSource: '',
            params: {
              sid: '{B39A4351-23CC-4D38-8430-57B992FC4881}',
              ph: 'headless-header',
              sig: 'sxa-sugconanzheader'
            },
            placeholders: {
              'sxa-sugconanzheader': [
                {
                  uid: '8cd89a75-806b-4ad7-bfcd-72d71f5aae83',
                  componentName: 'FixedWidthContainer',
                  dataSource: '',
                  params: {
                    GridParameters: 'col-12',
                    Styles: 'background-dark-grey',
                    CacheClearingBehavior: 'Clear on publish',
                    DynamicPlaceholderId: '3',
                    FieldNames: 'Default'
                  },
                  placeholders: {
                    'container-{*}': [
                      {
                        uid: '317b7e31-c4b8-4594-b7e2-4bede329746e',
                        componentName: 'RichText',
                        dataSource: '/sitecore/content/Sugcon/SugconAnzSxa/Presentation/Partial Designs/SugconAnzHeader/Data/Text 1',
                        params: {
                          GridParameters: 'col-12',
                          FieldNames: 'Default',
                          CacheClearingBehavior: 'Clear on publish',
                          DynamicPlaceholderId: '2'
                        },
                        fields: {
                          Text: {
                            value: '<p><a rel="noopener noreferrer" href="https://sugcon.events/" target="_blank">SUGCON Events</a>&nbsp; &nbsp; <a rel="noopener noreferrer" href="https://virtual.sugcon.events/" target="_blank">SUGCON Events Virtual</a>&nbsp; &nbsp; <a rel="noopener noreferrer" href="https://europe.sugcon.events/" target="_blank">SUGCON Events Europe</a>&nbsp; &nbsp; <a rel="noopener noreferrer" href="https://anz.sugcon.events/" target="_blank">SUGCON Events Australia and New Zealand</a></p>'
                          }
                        }
                      }
                    ]
                  }
                },
                {
                  uid: 'ba87d48a-7b72-4463-b417-eafdc33aeea4',
                  componentName: 'FixedWidthContainer',
                  dataSource: '',
                  params: {
                    GridParameters: 'col-12',
                    CacheClearingBehavior: 'Clear on publish',
                    DynamicPlaceholderId: '4',
                    FieldNames: 'Default'
                  },
                  placeholders: {
                    'container-{*}': [
                      {
                        uid: 'cbb332e3-6cdb-4eda-9a07-08cb4018bd46',
                        componentName: 'Image',
                        dataSource: '/sitecore/content/Sugcon/SugconAnzSxa/Presentation/Partial Designs/SugconAnzHeader/Data/Image 1',
                        params: {
                          GridParameters: 'col-3',
                          FieldNames: 'Default',
                          CacheClearingBehavior: 'Clear on publish',
                          DynamicPlaceholderId: '1'
                        },
                        fields: {
                          ImageCaption: { value: '' },
                          Image: {
                            value: {
                              src: 'https://xmcloudcm.localhost/-/media/Project/Sugcon/shared/sugcon-logo-small-red.png?h=136&iar=0&w=113&hash=EADF907F1DB606A9E35AD2F9192DB64B',
                              alt: '',
                              width: '113',
                              height: '136'
                            }
                          },
                          TargetUrl: {
                            value: {
                              text: '',
                              anchor: '',
                              linktype: 'internal',
                              class: '',
                              title: '',
                              target: '',
                              querystring: '',
                              id: '{6F42EB7E-7DDA-4CCD-B116-A136D10B0E3D}',
                              href: '/'
                            }
                          }
                        }
                      },
                      {
                        uid: '031baeac-2b16-4110-8a13-d3805c4b2028',
                        componentName: 'Navigation',
                        dataSource: '',
                        params: {
                          GridParameters: 'col-9',
                          Styles: 'main-nav',
                          LevelFrom: '{1BB88840-5FB3-4353-AD8D-81136F6FF75A}',
                          LevelTo: '{A59325BB-5A27-46F9-8110-9D499715F3BE}',
                          Filter: '{D063E9D1-C7B5-4B1E-B31E-69886C9C59F5}',
                          CacheClearingBehavior: 'Clear on publish',
                          FieldNames: 'Default'
                        },
                        fields: [
                          {
                            Id: 'bf345f94-f106-4d63-b9c6-d79c1cf0abb5',
                            Styles: [ 'level1', 'item0', 'odd', 'first' ],
                            Href: '/Agenda',
                            Querystring: '',
                            NavigationTitle: { value: 'Agenda', editable: 'Agenda' }
                          },
                          {
                            Id: 'b55d4ded-a755-4a3d-92ce-5d90712b737c',
                            Styles: [ 'level1', 'item1', 'even', 'active' ],
                            Href: '/Speakers',
                            Querystring: '',
                            NavigationTitle: { value: 'Speakers', editable: 'Speakers' }
                          },
                          {
                            Id: '37f1704f-ea7a-406c-9c61-c4dd58e0f7aa',
                            Styles: [ 'level1', 'item2', 'odd' ],
                            Href: '/Sessions',
                            Querystring: '',
                            NavigationTitle: { value: 'Sessions', editable: 'Sessions' }
                          },
                          {
                            Id: 'a0d2eba8-2a35-40b6-999b-d8431fcd25c9',
                            Styles: [ 'level1', 'item3', 'even' ],
                            Href: '/Sponsors',
                            Querystring: '',
                            NavigationTitle: { value: 'Sponsors', editable: 'Sponsors' }
                          },
                          {
                            Id: 'f52cb5ec-0086-4826-85a3-204e02ac30c6',
                            Styles: [ 'level1', 'item4', 'odd', 'last' ],
                            Href: '/Organisation',
                            Querystring: '',
                            NavigationTitle: {
                              value: 'Organisation',
                              editable: 'Organisation'
                            }
                          }
                        ]
                      }
                    ]
                  }
                }
              ]
            }
          }
        ],
        'headless-main': [
          {
            uid: '9e18b912-106b-466f-bf23-bfd959a5205b',
            componentName: 'FixedWidthContainer',
            dataSource: '',
            params: {
              CacheClearingBehavior: 'Clear on publish',
              GridParameters: 'col-12',
              DynamicPlaceholderId: '2',
              FieldNames: 'Default'
            },
            placeholders: {
              'container-{*}': [
                {
                  uid: '884ec8f2-10a6-49de-a37a-2594f1c376c3',
                  componentName: 'Speaker',
                  dataSource: '{9A6E682C-D02E-4567-9162-B67B273341CC}',
                  params: {
                    FieldNames: 'Default',
                    CacheClearingBehavior: 'Clear on publish',
                    GridParameters: 'col-12',
                    DynamicPlaceholderId: '1'
                  },
                  fields: {
                    SessionizeURL: {
                      value: 'https://sessionize.com/api/v2/0b2ge63q/view/Speakers'
                    },
                    Title: { value: 'SUGCON ANZ 2022 Speakers' }
                  }
                }
              ]
            }
          }
        ],
        'headless-footer': [
          {
            uid: '06234234-aa92-4911-bb80-fdd026df73db',
            componentName: 'PartialDesignDynamicPlaceholder',
            dataSource: '',
            params: {
              sid: '{FEBD68C4-8DAF-403A-893E-E4E86C0A8A1E}',
              ph: 'headless-footer',
              sig: 'sxa-sugconanzfooter'
            },
            placeholders: {
              'sxa-sugconanzfooter': [
                {
                  uid: '35bff60a-571e-4a82-82df-65b54a29f8e9',
                  componentName: 'FixedWidthContainer',
                  dataSource: '',
                  params: {
                    GridParameters: 'col-12',
                    CacheClearingBehavior: 'Clear on publish',
                    DynamicPlaceholderId: '2',
                    FieldNames: 'Default'
                  },
                  placeholders: {
                    'container-{*}': [
                      {
                        uid: '0847726c-083f-47cd-9e78-249e883aff8e',
                        componentName: 'RichText',
                        dataSource: '/sitecore/content/Sugcon/SugconAnzSxa/Presentation/Partial Designs/SugconAnzFooter/Data/Text 1',
                        params: {
                          GridParameters: 'col-12 col-md-9',
                          FieldNames: 'Default',
                          CacheClearingBehavior: 'Clear on publish',
                          DynamicPlaceholderId: '1'
                        },
                        fields: {
                          Text: {
                            value: '© Copyright 2022, Sitecore User Group Conference'
                          }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  }
}

RestLayoutService

{
  sitecore: {
    context: {
      pageEditing: false,
      site: { name: 'sugconanz' },
      pageState: 'normal',
      language: 'en',
      itemPath: '/Speakers'
    },
    route: {
      name: 'Speakers',
      displayName: 'Speakers',
      fields: {
        Content: { value: '' },
        Title: { value: 'Speakers' },
        NavigationTitle: { value: 'Speakers' },
        NavigationClass: null,
        NavigationFilter: [],
        Priority: {
          id: '19f3e919-4991-495f-9207-e1dadfd06f54',
          url: 'https://xmcloudcm.localhost/sitecore/login/sitecore/system/Settings/Foundation/Experience-Accelerator/SiteMetadata/Enums/SitemapPriority/05',
          name: '05',
          displayName: '0.5',
          fields: { Value: { value: '0.5' } }
        },
        ChangeFrequency: {
          id: 'd23b4654-53a5-4589-8b1b-5665a763d144',
          url: 'https://xmcloudcm.localhost/sitecore/login/sitecore/system/Settings/Foundation/Experience-Accelerator/SiteMetadata/Enums/SitemapChangeFrequency/daily',
          name: 'daily',
          displayName: 'daily',
          fields: { Value: { value: 'Daily' } }
        },
        'Page Design': null,
        MetaCustomAttributes: { value: '' },
        MetaKeywords: { value: '' },
        MetaDescription: { value: '' },
        OgType: { value: '' },
        OgDescription: { value: '' },
        OgImage: { value: {} },
        OgTitle: { value: '' },
        ProfileAttributes: { value: '' }
      },
      databaseName: 'master',
      deviceId: 'fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3',
      itemId: 'b55d4ded-a755-4a3d-92ce-5d90712b737c',
      itemLanguage: 'en',
      itemVersion: 1,
      layoutId: '96e5f4ba-a2cf-4a4c-a4e7-64da88226362',
      templateId: '36cad6cf-d418-43ca-bc57-656e44069116',
      templateName: 'Page',
      placeholders: {
        'headless-header': [
          {
            uid: '22f98a7c-8784-4968-9da6-29c4e6506a20',
            componentName: 'PartialDesignDynamicPlaceholder',
            dataSource: '',
            params: {
              sid: '{B39A4351-23CC-4D38-8430-57B992FC4881}',
              ph: 'headless-header',
              sig: 'sxa-sugconanzheader'
            }
          }
        ],
        'headless-main': [
          {
            uid: '9e18b912-106b-466f-bf23-bfd959a5205b',
            componentName: 'FixedWidthContainer',
            dataSource: '',
            params: {
              CacheClearingBehavior: 'Clear on publish',
              GridParameters: 'col-12',
              DynamicPlaceholderId: '2',
              FieldNames: 'Default'
            },
            placeholders: { 'container-{*}': [] }
          }
        ],
        'headless-footer': [
          {
            uid: '06234234-aa92-4911-bb80-fdd026df73db',
            componentName: 'PartialDesignDynamicPlaceholder',
            dataSource: '',
            params: {
              sid: '{FEBD68C4-8DAF-403A-893E-E4E86C0A8A1E}',
              ph: 'headless-footer',
              sig: 'sxa-sugconanzfooter'
            }
          }
        ]
      }
    }
  }
}

Does anyone know why these results are different? And is there a way to fix it?

Answer 1

There are 4 diff chunks in the two outputs.

The first diff is that the GraphQLLayoutService does not display the contents of the Priority field, whereas the RestLayoutService does:

The cause of this diff is not immediately clear.

The last 3 diffs are cases in which the GraphQLLayoutService displays component data in dynamic placeholders, whereas the RestLayoutService does not.

Try checking this guide on how to configure components to use dynamic placeholders, and verify that the components have been configured properly.

This issue with the missing dynamic placeholder data in REST strikes me as a potential issue with the project itself, but if that is the case, it is interesting that the GraphQL output is not affected.

Otherwise, the presence of the Priority field data in the RestLayoutService may be an example of default configurations differing between the two options. My understanding is that Sitecore is focusing more attention on GraphQL these days, so it would not surprise me if there was output configuration drift.

If all else fails, you can look into fetching layout data using a custom REST data fetcher.

Answer 2

I've had contact with Rob Earlam and he said the following:

Edge only serves data in GQL format, and the CM endpoint isn't meant for production workload, so I don't see how the RestService will be an option when working with XM Cloud.

So even though you can configure the LayoutServiceFactory to use the RestLayoutService you should not do that because it's not supported.