XM Cloud - Extending Multi Site Plugin GraphQL Info Service

Jared Arnofsky,•XM CloudNext.jsJSS
Back

Summary

We encountered an issue where we needed to modify the query in the GraphQL Site Info Service, which is part of the Multi Site plugin Sitecore provides us. There was an issue where only 10 sites were returning and we needed more to return over 300. We decided to extend the library that Sitecore provided and change the query for our needs.

Identify the Query to Extend

We find the source code for the GraphQL Site Info Service:

Source Code (opens in a new tab)

We can see the query below:

const headlessSiteGroupingTemplate = 'E46F3AF2-39FA-4866-A157-7017C4B2A40C';
const sitecoreContentRootItem = '0DE95AE4-41AB-4D01-9EB0-67441B7C2450';

const defaultQuery = /* GraphQL */ `
  {
    search(
      where: {
        AND: [
          {
            name: "_templates"
            value: "${headlessSiteGroupingTemplate}"
            operator: CONTAINS
          }
          {
            name: "_path"
            value: "${sitecoreContentRootItem}"
            operator: CONTAINS
          }
        ]
      }
    ) {
      results {
      ... on Item {
        name: field(name: "SiteName") {
          value
        }
        hostName: field(name: "Hostname") {
          value
        }
        language: field(name: "Language") {
          value
        }
        pointOfSale: field(name: "POS") {
          value
        }
      }
    }
  }
}
`;

The Solution

We created a new file called: [root]\src\app\src\lib\graphql-siteinfo-service-extended.ts and placed the following code in it to extend and modify the query:

import {
  GraphQLSiteInfoService,
  GraphQLSiteInfoServiceConfig,
} from '@sitecore-jss/sitecore-jss-nextjs';
 
const headlessSiteGroupingTemplate = 'E46F3AF2-39FA-4866-A157-7017C4B2A40C';
const sitecoreContentRootItem = '0DE95AE4-41AB-4D01-9EB0-67441B7C2450';
 
export class GraphQLSiteInfoServiceExtended extends GraphQLSiteInfoService {
  protected get query(): string {
    return /* GraphQL */ `
          {
            search( first:999
              where: {
                AND: [
                  {
                    name: "_templates"
                    value: "${headlessSiteGroupingTemplate}"
                    operator: CONTAINS
                  }
                  {
                    name: "_path"
                    value: "${sitecoreContentRootItem}"
                    operator: CONTAINS
                  }
                ]
              }
            ) {
              results {
              ... on Item {
                name: field(name: "SiteName") {
                  value
                }
                hostName: field(name: "Hostname") {
                  value
                }
                language: field(name: "Language") {
                  value
                }
                pointOfSale: field(name: "POS") {
                  value
                }
              }
            }
          }
        }
        `;
  }

  constructor(config: GraphQLSiteInfoServiceConfig) {
    super(config);
  }
}

We need to update the [root]\src\app\scripts\config\plugins\multisite.ts file so that it now uses the extended class. We first add a new import referencing our new code:

import { GraphQLSiteInfoServiceExtended } from 'lib/graphql-siteinfo-service-extended';

and then modify the siteInfoService variable to use it:

const siteInfoService = new GraphQLSiteInfoServiceExtended({
	endpoint,
	apiKey,
});
 
sites = await siteInfoService.fetchSiteInfo();

When we built the code we threw an error: Class constructor cannot be invoked without 'new'....

After some research, and a little more digging, we learned that extends is a feature of ES6:

Extends Documentation (opens in a new tab)

All we had to do was update the tsconfig.json and set target property to es6.

Now everything is working as expected and the new query is working as expected. The query is returning the expected results.

Conclusion

Being able to modify and extend base libraries that Sitecore supplies is a very powerful tool. This was a specific use case to extend a query for our needs, but this same pattern can be used for other uses in the future.

UPDATE:

Sitecore has since modified their source code to handle this scenario in their development branch and in the future this specific work around will not be needed. However, this approach to extending a query in their library is still useful to conceptually understand for other use cases in the future.

Resolved Bug (opens in a new tab)