[Dictionary Service] [Sitemap Service] Provide ability to customize jssAppTemplateId

packages/sitecore-jss-nextjs/src/services/graphql-sitemap-service.test.ts

@@ -10,6 +10,21 @@ import sitemapQueryResult from '../testData/sitemapQueryResult.json';
 import sitemapServiceResult from '../testData/sitemapServiceResult';
 import { GraphQLClient, GraphQLRequestClient } from '@sitecore-jss/sitecore-jss';
 
+/**
+ * @description helper function to generate a random GUID
+ * @returns a randomly generated GUID for testing purposes
+ * @see https://www.tutorialspoint.com/how-to-create-guid-uuid-in-javascript
+ */
+function generateGUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    /* eslint no-bitwise: off */
+    const r = (Math.random() * 16) | 0,
+      v = c === 'x' ? r : (r & 0x3) | 0x8;
+    const GUID = v.toString(16);
+    return `{${GUID}}`;
+  });
+}
+
 class TestService extends GraphQLSitemapService {
   public client: GraphQLClient;
   constructor(options: GraphQLSitemapServiceConfig) {
@@ -318,6 +333,42 @@ describe('GraphQLSitemapService', () => {
       expect(sitemap).to.deep.equal(sitemapServiceResult);
     });
 
+    it('should use a jssTemplateId, if provided', async () => {
+      const jssAppTemplateId = generateGUID();
+      // mock a random template id
+      const randomId = generateGUID();
+
+      nock(endpoint)
+        .post('/', (body) => body.variables.jssAppTemplateId === jssAppTemplateId)
+        .reply(200, {
+          data: {
+            layout: {
+              homePage: {
+                rootItem: [
+                  {
+                    id: randomId,
+                  },
+                ],
+              },
+            },
+          },
+        });
+
+      nock(endpoint)
+        .post('/', (body) => body.variables.rootItemId === randomId)
+        .reply(200, sitemapQueryResult);
+
+      const service = new GraphQLSitemapService({
+        endpoint,
+        apiKey,
+        siteName,
+        jssAppTemplateId,
+      });
+
+      const sitemap = await service.fetchSSGSitemap(['ua']);
+      expect(sitemap).to.deep.equal(sitemapServiceResult);
+    });
+
     it('should throw error if SitemapQuery fails', async () => {
       mockRootItemIdRequest();
       nock(endpoint)

packages/sitecore-jss-nextjs/src/services/graphql-sitemap-service.ts

@@ -76,6 +76,12 @@ export interface GraphQLSitemapServiceConfig extends SearchServiceConfig {
    * The API key to use for authentication.
    */
   apiKey: string;
+
+  /**
+   * Optional. The template ID of a JSS App to use when searching for the appRootId.
+   * @default '061cba1554744b918a0617903b102b82' (/sitecore/templates/Foundation/JavaScript Services/App)
+   */
+  jssAppTemplateId?: string;
 }
 
 /**
@@ -156,7 +162,12 @@ export class GraphQLSitemapService {
     // If the caller does not specify a root item ID, then we try to figure it out
     const rootItemId =
       this.options.rootItemId ||
-      (await getAppRootId(this.graphQLClient, this.options.siteName, languages[0]));
+      (await getAppRootId(
+        this.graphQLClient,
+        this.options.siteName,
+        languages[0],
+        this.options.jssAppTemplateId
+      ));
 
     if (!rootItemId) {
       throw new Error(queryError);

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

@@ -7,6 +7,21 @@ import { GraphQLDictionaryService } from '.';
 import dictionaryQueryResponse from '../testData/mockDictionaryQueryResponse.json';
 import appRootQueryResponse from '../testData/mockAppRootQueryResponse.json';
 
+/**
+ * @description helper function to generate a random GUID
+ * @returns a randomly generated GUID for testing purposes
+ * @see https://www.tutorialspoint.com/how-to-create-guid-uuid-in-javascript
+ */
+function generateGUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    /* eslint no-bitwise: off */
+    const r = (Math.random() * 16) | 0,
+      v = c === 'x' ? r : (r & 0x3) | 0x8;
+    const GUID = v.toString(16);
+    return `{${GUID}}`;
+  });
+}
+
 class TestService extends GraphQLDictionaryService {
   public client: GraphQLClient;
   constructor(options: GraphQLDictionaryServiceConfig) {
@@ -81,6 +96,42 @@ describe('GraphQLDictionaryService', () => {
     expect(result).to.have.all.keys('foo', 'bar');
   });
 
+  it('should use a jssTemplateId, if provided', async () => {
+    const jssAppTemplateId = generateGUID();
+    // mock a random template id
+    const randomId = generateGUID();
+    nock(endpoint)
+      .post('/', (body) => body.variables.jssAppTemplateId === jssAppTemplateId)
+      .reply(200, {
+        data: {
+          layout: {
+            homePage: {
+              rootItem: [
+                {
+                  id: randomId,
+                },
+              ],
+            },
+          },
+        },
+      });
+
+    nock(endpoint)
+      .post('/', (body) => body.variables.rootItemId === randomId)
+      .reply(200, dictionaryQueryResponse);
+
+    const service = new GraphQLDictionaryService({
+      endpoint,
+      apiKey,
+      siteName,
+      cacheEnabled: false,
+      jssAppTemplateId,
+    });
+
+    const result = await service.fetchDictionaryData('en');
+    expect(result).to.have.all.keys('foo', 'bar');
+  });
+
   it('should throw error if could not resolve rootItemId', async () => {
     nock(endpoint)
       .post('/', /AppRootQuery/)

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

@@ -64,6 +64,12 @@ export interface GraphQLDictionaryServiceConfig extends SearchServiceConfig, Cac
    * @default '6d1cd89719364a3aa511289a94c2a7b1' (/sitecore/templates/System/Dictionary/Dictionary entry)
    */
   dictionaryEntryTemplateId?: string;
+
+  /**
+   * Optional. The template ID of a JSS App to use when searching for the appRootId.
+   * @default '061cba1554744b918a0617903b102b82' (/sitecore/templates/Foundation/JavaScript Services/App)
+   */
+  jssAppTemplateId?: string;
 }
 
 /**
@@ -111,7 +117,12 @@ export class GraphQLDictionaryService extends DictionaryServiceBase {
     // If the caller does not specify a root item ID, then we try to figure it out
     const rootItemId =
       this.options.rootItemId ||
-      (await getAppRootId(this.graphQLClient, this.options.siteName, language));
+      (await getAppRootId(
+        this.graphQLClient,
+        this.options.siteName,
+        language,
+        this.options.jssAppTemplateId
+      ));
 
     if (!rootItemId) {
       throw new Error(queryError);

samples/vue/src/components/GraphQL/GraphQL-SSRDemo.vue

@@ -6,30 +6,34 @@
 
     <p>
       Server Side GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint,
-      prior to rendering the app to a string. This sample app uses the <code>vue-apollo</code> library to
-      manage GraphQL queries.
+      prior to rendering the app to a string. This sample app uses the
+      <code>vue-apollo</code> library to manage GraphQL queries.
     </p>
     <p>
-      <strong>NOTE:</strong> when using the <code>useQuery</code> prefetch option,
-      GraphQL queries are executed <em>prior</em> to app rendering.
+      <strong>NOTE:</strong> when using the <code>useQuery</code> prefetch option, GraphQL queries
+      are executed <em>prior</em> to app rendering.
     </p>
     <p>
       Expected behavior for this component:
-      <ul>
-        <li>
-          <strong>Connected Mode:</strong> the GraphQL query will execute in the browser after component load.
-          The <code>prefetch</code> option will not execute.
-        </li>
-        <li>
-          <strong>Integrated Mode:</strong> the <code>prefetch</code> option of the GraphQL query will execute on the server
-          and output will be rendered in the markup generated by the app on the server. After the initial load / render from
-          the server, you can manage the query like a client-side query.
-        </li>
-        <li><strong>Disconnected Mode:</strong> GraphQL requires connected mode, headless
-        connected mode, or integrated mode to work.</li>
-      </ul>
     </p>
 
+    <ul>
+      <li>
+        <strong>Connected Mode:</strong> the GraphQL query will execute in the browser after
+        component load. The <code>prefetch</code> option will not execute.
+      </li>
+      <li>
+        <strong>Integrated Mode:</strong> the <code>prefetch</code> option of the GraphQL query will
+        execute on the server and output will be rendered in the markup generated by the app on the
+        server. After the initial load / render from the server, you can manage the query like a
+        client-side query.
+      </li>
+      <li>
+        <strong>Disconnected Mode:</strong> GraphQL requires connected mode, headless connected
+        mode, or integrated mode to work.
+      </li>
+    </ul>
+
     <p v-if="loading" class="alert alert-info">GraphQL query is executing...</p>
     <p v-if="error" class="alert alert-danger">GraphQL query error: {{ error.toString() }}</p>
     <div v-if="!loading && result && result.contextItem">
@@ -40,8 +44,9 @@
       <br />
       children:
       <ul>
-        <li v-for="(child) in result.contextItem.children" :key="child.id">
-          <router-link :to="child.url">{{child.pageTitle.value}}</router-link>&nbsp; (editable title too! <sc-text :field="child.pageTitle.jss" />)
+        <li v-for="child in result.contextItem.children" :key="child.id">
+          <router-link :to="child.url">{{ child.pageTitle.value }}</router-link
+          >&nbsp; (editable title too! <sc-text :field="child.pageTitle.jss" />)
         </li>
       </ul>
     </div>
@@ -51,7 +56,7 @@
 <script>
 import { getCurrentInstance, defineComponent, watch } from 'vue';
 import { ConnectedDemoQuery } from './GraphQL-ConnectedDemo.query.graphql';
-import { useQuery } from "@vue/apollo-composable/dist/useQuery";
+import { useQuery } from '@vue/apollo-composable/dist/useQuery';
 
 import { Text } from '@sitecore-jss/sitecore-jss-vue';
 
@@ -82,15 +87,15 @@ export default defineComponent({
       if (!variables.contextItem) variables.contextItem = defaultValue;
 
       return variables;
-    }
+    };
 
     const { result, loading, error } = useQuery(ConnectedDemoQuery, variables());
 
     return {
       result,
       loading,
       error,
-    }
+    };
   },
   // Workaround for issue https://github.com/vuejs/vue-apollo/issues/1100
   // Prefetch is not working using Composition API
@@ -99,11 +104,11 @@ export default defineComponent({
     return new Promise((resolve, reject) => {
       watch(
         () => this.loading,
-        () => resolve({}),
+        () => resolve({})
       );
       watch(
         () => this.error,
-        () => reject(),
+        () => reject()
       );
     });
   },