[sitecore-jss] rootItemId not resolvable for different language versions

packages/sitecore-jss/src/graphql/app-root-query.ts

@@ -1,6 +1,5 @@
 import { GraphQLClient } from './../graphql-request-client';
 import { SitecoreTemplateId } from '../constants';
-import debug from '../debug';
 
 /** @private */
 export const siteNameError = 'The site name must be a non-empty string';
@@ -62,15 +61,20 @@ export async function getAppRootId(
   if (!language) {
     throw new RangeError(languageError);
   }
-
-  debug.dictionary('fetching site root for %s %s', language, siteName);
-
-  const fetchResponse = await client.request<AppRootQueryResult>(appRootQuery, {
+  let fetchResponse = await client.request<AppRootQueryResult>(appRootQuery, {
     jssAppTemplateId: jssAppTemplateId || SitecoreTemplateId.JssApp,
     siteName,
     language,
   });
 
+  if (!fetchResponse?.layout?.homePage?.rootItem?.length && language !== 'en') {
+    fetchResponse = await client.request<AppRootQueryResult>(appRootQuery, {
+      jssAppTemplateId: jssAppTemplateId || SitecoreTemplateId.JssApp,
+      siteName,
+      language: 'en',
+    });
+  }
+
   if (!fetchResponse?.layout?.homePage?.rootItem?.length) {
     return null;
   }

packages/sitecore-jss/src/graphql/graphql.test.ts

@@ -31,6 +31,64 @@ describe('graphql', () => {
         expect(result).to.equal('GUIDGUIDGUID');
       });
 
+      it('valid root id using fallback language as en', async () => {
+        nock(endpoint, { reqheaders: { sc_apikey: apiKey } })
+          .post('/', (body) => {
+            return body.variables.language === 'language';
+          })
+          .reply(200, {
+            data: {
+              layout: {
+                homePage: {
+                  rootItem: [],
+                },
+              },
+            },
+          });
+
+        nock(endpoint, { reqheaders: { sc_apikey: apiKey } })
+          .post('/', (body) => {
+            return body.variables.language === 'en';
+          })
+          .reply(200, appRootQueryResponse);
+
+        const result = await getAppRootId(client, 'siteName', 'language');
+        expect(result).to.equal('GUIDGUIDGUID');
+      });
+
+      it('null for the passed language and for fallback language en', async () => {
+        nock(endpoint, { reqheaders: { sc_apikey: apiKey } })
+          .post('/', (body) => {
+            return body.variables.language === 'language';
+          })
+          .reply(200, {
+            data: {
+              layout: {
+                homePage: {
+                  rootItem: [],
+                },
+              },
+            },
+          });
+
+        nock(endpoint, { reqheaders: { sc_apikey: apiKey } })
+          .post('/', (body) => {
+            return body.variables.language === 'en';
+          })
+          .reply(200, {
+            data: {
+              layout: {
+                homePage: {
+                  rootItem: [],
+                },
+              },
+            },
+          });
+
+        const result = await getAppRootId(client, 'siteName', 'language');
+        expect(result).to.be.null;
+      });
+
       it('null if no app root found', async () => {
         nock(endpoint, { reqheaders: { sc_apikey: apiKey } })
           .post('/', queryNameFilter)
@@ -44,7 +102,7 @@ describe('graphql', () => {
             },
           });
 
-        const result = await getAppRootId(client, 'siteName', 'language');
+        const result = await getAppRootId(client, 'siteName', 'en');
         expect(result).to.be.null;
       });
     });

packages/sitecore-jss/src/i18n/graphql-dictionary-service.ts

@@ -114,6 +114,8 @@ export class GraphQLDictionaryService extends DictionaryServiceBase {
       return cachedValue;
     }
 
+    debug.dictionary('fetching site root for %s %s', language, this.options.siteName);
+
     // If the caller does not specify a root item ID, then we try to figure it out
     const rootItemId =
       this.options.rootItemId ||