[nextjs-sxa] GraphQL Dictionary Service fails to auto-resolve app root item

[coreyasmith]

Describe the Bug

When a new Headless SXA site is created using GraphQL, the Dictionary Service fails to auto-resolve the app root item with the following error:

Error: Valid value for rootItemId not provided and failed to auto-resolve app root item.

To Reproduce

Create a new Headless SXA site using GraphQL to fetch the Layout and Dictionary data.

Expected Behavior

Headless SXA site is auto-resolved.

Possible Fix

When no rootItemId is specified in the GraphQLDictionaryService in \src\lib\dictionary-service-factory.ts, the Dictionary Service attempts to resolve the root item ID by querying Sitecore for items that inherit from the Headless Services App template (/sitecore/templates/Foundation/JavaScript Services/App): https://github.com/Sitecore/jss/blob/1a2234236ab5ab5bb5e19a575d219fce6887ed32/packages/sitecore-jss/src/graphql/app-root-query.ts#L65

The Headless SXA Headless Site template (/sitecore/templates/Foundation/JSS Experience Accelerator/Multisite/Headless Site) does not inherit the Headless Services App template, so Headless SXA sites cannot be auto-resolved.

To fix this issue, either:

1. Update the getAppRootId query to include the Headless Site template (9ed6640464c9412290e1869cb3cea566) when no jssAppTemplateId is specified; or
2. Update SXA's Headless Site template to inherit the Headless Services App template.

Based on #1409, it appears this has already been fixed using the second approach in XM Cloud.

Workaround

Teams affected by this issue that only have SXA Headless sites can fix the issue by adding jssAppTemplateId: '9ed6640464c9412290e1869cb3cea566' (the ID of the SXA Headless Site template) to the GraphQLDictionaryService in \src\lib\dictionary-service-factory.ts like so:

new GraphQLDictionaryService({
  endpoint: config.graphQLEndpoint,
  apiKey: config.sitecoreApiKey,
  siteName,
  jssAppTemplateId: '9ed6640464c9412290e1869cb3cea566',
})

Teams that have both SXA Headless sites and "vanilla" Headless Services sites, and wish to share the same app between those sites with the nextjs-multisite module, will need to update the SXA Headless Site template in Sitecore to inherit from the Headless Services App template and should not specify the jssAppTemplateId.

Provide environment information

• Sitecore Version: 10.3
• JSS Version: 21.2.1
• Browser Name and version: Firefox 114.0.2
• Operating System and version (desktop or mobile): Windows 11 22H2 (22621.1928)
• Link to your project (if available): N/A

[art-alexeyenko]

Hi @coreyasmith ! Thanks for the report!

This one is a pesky issue that comes and goes on occasion, we'll re-verify it and update here.

[stale[bot]]

This has been automatically marked as stale because it has not had recent activity. It will be closed if there is no further activity within 30 days. You may add comments or the 'keep' label to prevent it from closing. Thank you for your contributions.

[chrissnyder2337]

I just experienced this issue.