[sitecore-jss] [sitecore-jss-nextjs] Pass sc_layoutKind to grapqhl layout request header.

CHANGELOG.md

@@ -51,6 +51,12 @@ Our versioning strategy is as follows:
 
 ### 🧹 Chores
 
+## 22.1.1
+
+### 🎉 New Features & Improvements
+
+* `[sitecore-jss]``[sitecore-jss-nextjs]` Pass `sc_layoutKind` to grapqhl layout request header. ([#1907](https://github.com/Sitecore/jss/pull/1907))
+
 ## 22.1.0
 
 ### 🐛 Bug Fixes

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts

@@ -20,13 +20,14 @@ class PreviewModePlugin implements Plugin {
 
     // If we're in Pages preview (editing) Metadata Edit Mode, prefetch the editing data
     if (isEditingMetadataPreviewData(context.previewData)) {
-      const { site, itemId, language, version, variantIds } = context.previewData;
+      const { site, itemId, language, version, variantIds, layoutKind } = context.previewData;
 
       const data = await graphQLEditingService.fetchEditingData({
         siteName: site,
         itemId,
         language,
         version,
+        layoutKind,
       });
 
       if (!data) {

packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts

@@ -181,6 +181,7 @@ describe('EditingRenderMiddleware', () => {
       sc_variant: 'dev',
       sc_version: 'latest',
       secret: secret,
+      sc_layoutKind: 'shared',
     } as MetadataQueryParams;
 
     it('should handle request', async () => {
@@ -200,6 +201,7 @@ describe('EditingRenderMiddleware', () => {
         version: 'latest',
         editMode: 'metadata',
         pageState: 'edit',
+        layoutKind: 'shared',
       });
 
       expect(res.redirect).to.have.been.calledOnce;
@@ -237,6 +239,7 @@ describe('EditingRenderMiddleware', () => {
         version: undefined,
         editMode: 'metadata',
         pageState: 'edit',
+        layoutKind: undefined,
       });
     });
 
@@ -265,6 +268,7 @@ describe('EditingRenderMiddleware', () => {
         version: undefined,
         editMode: 'metadata',
         pageState: 'edit',
+        layoutKind: undefined,
       });
 
       expect(res.redirect).to.have.been.calledOnce;
@@ -297,6 +301,7 @@ describe('EditingRenderMiddleware', () => {
         version: 'latest',
         editMode: 'metadata',
         pageState: 'edit',
+        layoutKind: 'shared',
       });
 
       expect(res.redirect).to.have.been.calledOnce;

packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts

@@ -2,6 +2,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { STATIC_PROPS_ID, SERVER_PROPS_ID } from 'next/constants';
 import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
 import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { LayoutKind } from '@sitecore-jss/sitecore-jss/editing';
 import {
   QUERY_PARAM_EDITING_SECRET,
   EDITING_ALLOWED_ORIGINS,
@@ -277,6 +278,7 @@ export type MetadataQueryParams = {
   mode: Exclude<LayoutServicePageState, 'normal'>;
   sc_variant?: string;
   sc_version?: string;
+  sc_layoutKind?: LayoutKind;
 };
 
 /**
@@ -297,6 +299,7 @@ export type EditingMetadataPreviewData = {
   pageState: Exclude<LayoutServicePageState, 'Normal'>;
   variantIds: string[];
   version?: string;
+  layoutKind?: LayoutKind;
 };
 
 /**
@@ -358,6 +361,7 @@ export class MetadataHandler {
         version: query.sc_version,
         editMode: EditMode.Metadata,
         pageState: query.mode,
+        layoutKind: query.sc_layoutKind,
       } as EditingMetadataPreviewData,
       // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
       {

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

@@ -15,6 +15,7 @@ import {
   mockEditingServiceResponse,
 } from '../test-data/mockEditingServiceResponse';
 import { EditMode } from '../layout';
+import { LayoutKind } from './models';
 import debug from '../debug';
 
 use(spies);
@@ -91,12 +92,18 @@ describe('GraphQLEditingService', () => {
       })
     ).to.be.true;
     expect(clientFactorySpy.returnValues[0].request).to.be.called.exactly(1);
-    expect(clientFactorySpy.returnValues[0].request).to.be.called.with(query, {
-      language,
-      version,
-      itemId,
-      siteName,
-    });
+    expect(clientFactorySpy.returnValues[0].request).to.be.called.with(
+      query,
+      {
+        language,
+        version,
+        itemId,
+        siteName,
+      },
+      {
+        sc_layoutKind: 'final',
+      }
+    );
 
     expect(result).to.deep.equal({
       layoutData: layoutDataResponse,
@@ -136,6 +143,7 @@ describe('GraphQLEditingService', () => {
       version,
       itemId,
       siteName,
+      layoutKind: LayoutKind.Shared,
     });
 
     expect(clientFactorySpy.calledOnce).to.be.true;
@@ -148,12 +156,18 @@ describe('GraphQLEditingService', () => {
       })
     ).to.be.true;
     expect(clientFactorySpy.returnValues[0].request).to.be.called.exactly(1);
-    expect(clientFactorySpy.returnValues[0].request).to.be.called.with(query, {
-      language,
-      version,
-      itemId,
-      siteName,
-    });
+    expect(clientFactorySpy.returnValues[0].request).to.be.called.with(
+      query,
+      {
+        language,
+        version,
+        itemId,
+        siteName,
+      },
+      {
+        sc_layoutKind: 'shared',
+      }
+    );
 
     expect(result).to.deep.equal({
       layoutData: {

packages/sitecore-jss/src/editing/graphql-editing-service.ts

@@ -3,6 +3,7 @@ import { PageInfo } from '../graphql';
 import { GraphQLClient, GraphQLRequestClientFactory } from '../graphql-request-client';
 import { DictionaryPhrases } from '../i18n';
 import { EditMode, LayoutServiceData } from '../layout';
+import { LayoutKind } from './models';
 
 /**
  * The dictionary query default page size.
@@ -115,20 +116,30 @@ export class GraphQLEditingService {
    * @param {string} variables.itemId - The item id (path) to fetch layout data for.
    * @param {string} variables.language - The language to fetch layout data for.
    * @param {string} [variables.version] - The version of the item (optional).
+   * @param {LayoutKind} [variables.layoutKind] - The final or shared layout switcher.
    * @returns {Promise} The layout data and dictionary phrases.
    */
   async fetchEditingData({
     siteName,
     itemId,
     language,
     version,
+    layoutKind = LayoutKind.Final,
   }: {
     siteName: string;
     itemId: string;
     language: string;
     version?: string;
+    layoutKind?: LayoutKind;
   }) {
-    debug.editing('fetching editing data for %s %s %s %s', siteName, itemId, language, version);
+    debug.editing(
+      'fetching editing data for %s %s %s %s',
+      siteName,
+      itemId,
+      language,
+      version,
+      layoutKind
+    );
 
     if (!siteName) {
       throw new RangeError('The site name must be a non-empty string');
@@ -143,12 +154,18 @@ export class GraphQLEditingService {
     let hasNext = true;
     let after = '';
 
-    const editingData = await this.graphQLClient.request<GraphQLEditingQueryResponse>(query, {
-      siteName,
-      itemId,
-      version,
-      language,
-    });
+    const editingData = await this.graphQLClient.request<GraphQLEditingQueryResponse>(
+      query,
+      {
+        siteName,
+        itemId,
+        version,
+        language,
+      },
+      {
+        sc_layoutKind: layoutKind,
+      }
+    );
 
     if (editingData?.site?.siteInfo?.dictionary) {
       dictionaryResults = editingData.site.siteInfo.dictionary.results;

packages/sitecore-jss/src/editing/index.ts

@@ -20,3 +20,4 @@ export {
   EditButtonTypes,
   mapButtonToCommand,
 } from './edit-frame';
+export { LayoutKind } from './models';

packages/sitecore-jss/src/editing/models.ts

@@ -0,0 +1,9 @@
+/**
+ * Represents the Editing Layout variant.
+ * - shared - shared layout
+ * - final - final layout
+ */
+export enum LayoutKind {
+  Final = 'final',
+  Shared = 'shared',
+}

packages/sitecore-jss/src/graphql-request-client.ts

@@ -4,16 +4,29 @@ import { DocumentNode } from 'graphql';
 import debuggers, { Debugger } from './debug';
 import TimeoutPromise from './utils/timeout-promise';
 
+/**
+ * Options for configuring a GraphQL request.
+ */
+interface RequestOptions {
+  [key: string]: unknown;
+  headers?: Record<string, string>;
+}
+
 /**
  * An interface for GraphQL clients for Sitecore APIs
  */
 export interface GraphQLClient {
   /**
    * Execute graphql request
    * @param {string | DocumentNode} query graphql query
-   * @param {Object} variables graphql variables
+   * @param {Object} [variables] graphql variables
+   * @param {RequestOptions} [options] options for configuring a GraphQL request.
    */
-  request<T>(query: string | DocumentNode, variables?: { [key: string]: unknown }): Promise<T>;
+  request<T>(
+    query: string | DocumentNode,
+    variables?: { [key: string]: unknown },
+    options?: RequestOptions
+  ): Promise<T>;
 }
 
 /**
@@ -206,11 +219,13 @@ export class GraphQLRequestClient implements GraphQLClient {
   /**
    * Execute graphql request
    * @param {string | DocumentNode} query graphql query
-   * @param {Object} variables graphql variables
+   * @param {Object} [variables] graphql variables
+   * @param {RequestOptions} [options] Options for configuring a GraphQL request.
    */
   async request<T>(
     query: string | DocumentNode,
-    variables?: { [key: string]: unknown }
+    variables?: { [key: string]: unknown },
+    options?: RequestOptions
   ): Promise<T> {
     let attempt = 1;
 
@@ -219,12 +234,12 @@ export class GraphQLRequestClient implements GraphQLClient {
       // (or nice hooks like we have with Axios), but we should log whatever we have.
       this.debug('request: %o', {
         url: this.endpoint,
-        headers: this.headers,
+        headers: { ...this.headers, ...options?.headers },
         query,
         variables,
       });
       const startTimestamp = Date.now();
-      const fetchWithOptionalTimeout = [this.client.request(query, variables)];
+      const fetchWithOptionalTimeout = [this.client.request(query, variables, options?.headers)];
       if (this.timeout) {
         this.abortTimeout = new TimeoutPromise(this.timeout);
         fetchWithOptionalTimeout.push(this.abortTimeout.start);