When developing with Sitecore JSS, managing global data efficiently becomes a critical consideration for enterprise applications. While component-level GraphQL queries and page-specific resolvers have their place, there are scenarios where you need consistent data available across your entire application without repetitive fetching. This article explores how to enhance your Sitecore implementation by customizing the Sitecore context to include global configuration data, resulting in a more efficient and maintainable codebase.

Why Customize Sitecore Context Data?

Modern web applications often require global settings and configuration that need to be accessible throughout the application. Rather than fetching this data repeatedly at the component level or passing it down through numerous props, injecting it directly into the Sitecore context provides a clean solution.

By leveraging middleware plugins or page-props-factory plugins, you can seamlessly integrate data from various sources—GraphQL, OrderCloud, custom APIs, or even static data—into the Sitecore context. This data then becomes accessible application-wide via the useSitecoreContext() hook.

Implementation Guide

Let’s implement this approach using a page-props-factory-plugin. This allows us to intercept and enhance the page props before they’re delivered to the page components.

Step 1: Create a Plugin File

Navigate to /src/lib/page-props-factory/plugins and create a new TypeScript file for your context data resolver. In this example, we’ll create graphql-data.ts to fetch account settings for authentication purposes:

import { SitecorePageProps } from 'lib/page-props';
import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
import { Plugin } from '..';
import { ConfigurationData, getConfigData } from '../graphql/configuration';

class GraphqlDataPlugin implements Plugin {
  order = 1.5; // define the execution order

  async exec(
    props: SitecorePageProps,
    _context: GetServerSidePropsContext | GetStaticPropsContext
  ) {
    const siteName = props.site.name; //sitename
    const language = props.layoutData.sitecore.context.language ?? 'en';  //language
    //if data is not available in cache then it will be new call
    const configuration = await getConfigData(siteName, language)
		//finally set data on sitecore context
    props.layoutData.sitecore.context.graphQlData = {
      configuration,
    };

    return props;
  }
}

//types for the response
export interface GraphQlData {
  configuration: ConfigurationData | null;
}

export const graphqlDataPlugin = new GraphqlDataPlugin();

This plugin implements the Plugin interface, which requires:

• An order property to define execution priority
• An exec function that runs during page props generation

Step 2: Configure Data Retrieval

Create a dedicated configuration file to handle GraphQL queries. In this example, we’re retrieving account settings:

import graphqlClientFactory from 'lib/graphql-client-factory';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type ConfigurationData = Record<string, any>;

export async function getConfigData(
  siteName: string,
  language: string
): Promise<ConfigurationData> {
  const path = `/sitecore/content/[your_tenentName]/${siteName}/Data/Commerce/Accounts`;

  const gqlClient = graphqlClientFactory({});
  const response = await gqlClient.request<ConfigurationGraphQLResponse>(accountSettingGraphQl, {
    path,
    language,
  });

  const responseObj: ConfigurationData = {};
  response?.item?.fields.forEach(({ name, value }) => {
    responseObj[name] = value;
  });
  return responseObj;
}

//define a response type
type ConfigurationGraphQLResponse = {
  item: {
    fields: {
      name: string;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      value: any;
    }[];
  };
};

//graphQL query 
const accountSettingGraphQl = `
    query AccountsSetting($path: String!, $language: String!) {
    item(path: $path, language: $language) {
      fields(ownFields: true) {
        name
        value
      }
    }
  }
  `;

After this you just need to save you changes and run the npm command npm run start:connected

After page load you can see you data on console using __NEXT_DATA__

Step 4: Access Your Data

After implementing the plugin, the data becomes available in your components through the useSitecoreContext hook:

import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';

const MyComponent = () => {
  const { sitecoreContext } = useSitecoreContext();
  const graphQlData = sitecoreContext.graphQlData
  
  // Access your configuration data
  const configuration = graphQlData?.configuration;
  
  return (
    // Your component JSX
  );
};

Conclusion: A Foundation for Scalable Context Management

By customizing the Sitecore context with global data, you set the foundation for a scalable, maintainable application. This approach empowers developers to access configuration data across the entire app without excessive fetch calls or deeply nested props. In the next part, we’ll take this further by implementing a smart caching mechanism to improve performance.

Happy Coding 🎉