Fetch dictionary data with the JSS GraphQL Dictionary Service

Version:

You can fetch dictionary data from Sitecore using GraphQL and the JSS GraphQLDictionaryService.

To fetch dictionary data with the JSS GraphQL Dictionary Service:

In a dictionary-service.ts file, create and configure an instance of the GraphQLDictionaryService:

import { GraphQLDictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
import config from 'temp/config';
import clientFactory from 'lib/graphql-client-factory';

// Initialize the GraphQL Dictionary Service
export const dictionaryService = new GraphQLDictionaryService({
  clientFactory,
  siteName: config.sitecoreSiteName,
  /*
    The Dictionary Service requires a root item ID to fetch dictionary phrases for the current app. 
    If not provided, the service will attempt to determine the root item for the current JSS App using GraphQL and app name.
    For SXA site(s) and multisite setups, there's no need to specify it as it will be autoresolved.
    However, if your Sitecore instance has only one JSS App (e.g., in a Sitecore XP setup), you can specify the root item ID here.
  */
  rootItemId: 'GUID', // Replace 'GUID' with the actual root item ID
  retries:
    (process.env.GRAPH_QL_SERVICE_RETRIES && parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) ||
    0,
});

In the file where you want to fetch the data, import and use your new dictionary service instance:

import { dictionaryService } from './dictionary-service';
const language = 'en';
dictionaryService.fetchDictionaryData(language).then(data => {
    // do something with the data
});

If you have suggestions for improving this article, let us know!