[sitecore-jss] Add GraphQLLayoutService

packages/sitecore-jss/src/layout-service.test.ts

@@ -396,6 +396,59 @@ describe('LayoutService', () => {
       });
     });
 
+    it('should fetch layout data using custom search query', async () => {
+      nock('http://sctest')
+        .post('/graphql', (body) => {
+          return (
+            body.query.replace(/\n|\s/g, '') ===
+            'query{layout111(site:"supersite",routePath:"/styleguide",language:"en"){item{rendered}}}'
+          );
+        })
+        .reply(200, {
+          data: {
+            layout: {
+              item: {
+                rendered: {
+                  sitecore: {
+                    context: {
+                      pageEditing: false,
+                      site: { name: 'JssNextWeb' },
+                    },
+                    route: {
+                      name: 'styleguide',
+                      layoutId: 'xxx',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        });
+
+      const service = new GraphQLLayoutService({
+        endpoint: 'http://sctest/graphql',
+        siteName: 'supersite',
+        formatSearchQuery: (siteName, itemPath, locale) =>
+          `query{layout111(site:"${siteName}",routePath:"${itemPath}",language:"${locale ||
+            'en'}"){item{rendered}}}`,
+      });
+
+      const data = await service.fetchLayoutData('/styleguide');
+
+      expect(data).to.deep.equal({
+        sitecore: {
+          context: {
+            pageEditing: false,
+            site: { name: 'JssNextWeb' },
+          },
+          route: {
+            name: 'styleguide',
+            layoutId: 'xxx',
+          },
+        },
+      });
+    });
+
     it('should return error', async () => {
       nock('http://sctest')
         .post('/graphql')

packages/sitecore-jss/src/layout-service.ts

@@ -68,6 +68,14 @@ export type GraphQLLayoutServiceConfig = {
    * The JSS application name
    */
   siteName: string;
+  /**
+   * Override default search query
+   * @param {string} siteName
+   * @param {string} itemPath
+   * @param {string} [locale]
+   * @returns {string} custom search query
+   */
+  formatSearchQuery?: (siteName: string, itemPath: string, locale?: string) => string;
 };
 
 interface FetchParams {
@@ -228,13 +236,15 @@ export class GraphQLLayoutService implements LayoutService {
    * @returns {Promise<LayoutServiceData>} layout service data
    */
   async fetchLayoutData(itemPath: string, language?: string): Promise<LayoutServiceData> {
-    const query = this.getLayoutQuery(itemPath, language);
+    const query = this.serviceConfig.formatSearchQuery
+      ? this.serviceConfig.formatSearchQuery(this.serviceConfig.siteName, itemPath, language)
+      : this.getLayoutQuery(itemPath, language);
 
     const data = await this.createClient().request<{
       layout: { item: { rendered: LayoutServiceData } };
     }>(query);
 
-    return data.layout.item.rendered;
+    return data?.layout.item.rendered;
   }
 
   /**