Fetch layout data with the JSS GraphQL Layout Service

Current version: 21.x

You can fetch layout data from Sitecore using GraphQL and the JSS GraphQLLayoutService class.

To fetch layout data with the JSS GraphQL Layout Service:

In a layout-service.ts file, create and configure an instance of the GraphQLLayoutService class using :

RequestResponse

import {GraphQLLayoutService} from '@sitecore-jss/sitecore-jss';
import config from './config';

export const layoutService = new GraphQLLayoutService({
      endpoint: config.graphQLEndpoint,
      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';
layoutService.fetchLayoutData(language).then(data => {
    // do something with the data
});

Tip

You can pass a formatLayoutQuery option to your GraphQLLayoutService instance to override the default query. See the GraphQLLayoutServiceConfig type for details.

Do you have some feedback for us?

If you have suggestions for improving this article,