Fetch layout data with the JSS REST Layout Service

Current version: 20.x

One of the endpoints you can use to get layout data from Sitecore is the Sitecore Layout Service provided by Sitecore Headless Services using theRestLayoutService class provided by JSS.

When using the Sitecore Layout Service, you can also enable (or disable) tracking of page views, by toggling the value for the tracking property of the JSS REST Layout Service.

To invoke the Sitecore Layout Service from a JSS application using the JSS :

  1. In a layout-service.ts file, import the RestLayoutService class and your app configuration:

    RequestResponse
    import { RestLayoutService } from '@sitecore-jss/sitecore-jss';
    import config from './config';
    
  2. Create an instance of RestLayoutService and provide the configuration object (of the type RestLayoutServiceConfig):

    RequestResponse
    export const layoutService = new RestLayoutService({
      apiHost: config.sitecoreApiHost,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
      // tracking: false // if you wish to disable tracking
    });
  3. In the file where you want to fetch the data, import and use your new layout service instance:

    RequestResponse
    import { layoutService } from './layout-service';
    
    const language = 'en';
    const sitecoreRoutePath = '/styleguide';
    
    layoutService.fetchLayoutData(sitecoreRoutePath, language).then(data => {
         // do something with the data
    });

If the default implementation does not meet your needs, you can use a custom data fetcher.

Do you have some feedback for us?

If you have suggestions for improving this article,