Fetch layout data with the JSS GraphQL Layout Service

Version:

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 :

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:

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.

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