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
orderproperty to define execution priority - An
execfunction 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 🎉
Ravi Vadher 