Fetch dictionary data with the JSS GraphQL Dictionary Service

Version:

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

Note

This example assumes you create the files in the root directory of the application and that you have a config.js file in that same directory. Adjust the import statements as necessary to reflect your project's setup.

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';
import config from './config';

export const dictionaryService = new GraphQLDictionaryService({
      endpoint: config.graphQLEndpoint,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
      /*
      The Dictionary Service needs a root item ID to fetch dictionary phrases for the current
      app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
      otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
      rootItemId: '{GUID}'
      */
});

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!