Fetch layout data with the JSS REST Layout Service

Version: 22.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.

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

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';
```

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,
});

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,