---
title: "Fetch layout data with the JSS GraphQL Layout Service"
slug: "fetch-layout-data-with-the-jss-graphql-layout-service"
abstract: "Example of how to fetch Sitecore layout data with the JSS GraphQL Layout Service."
---
# Fetch layout data with the JSS GraphQL Layout Service

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

To fetch layout data with the JSS GraphQL Layout Service:

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

    ```csharp
    import {GraphQLLayoutService} from '@sitecore-jss/sitecore-jss';
    import config from 'temp/config';
    import clientFactory from 'lib/graphql-client-factory';

    export const layoutService = new GraphQLLayoutService({
          clientFactory,
          siteName: config.sitecoreSiteName,
          /*
          GraphQL endpoint may reach its rate limit with the amount of Layout and Dictionary requests it receives and throw a rate limit error.
          GraphQL Dictionary and Layout Services can handle rate limit errors from the server and attempt a retry on requests.
          For this, specify the number of retries the GraphQL client will attempt.
          It will only try the request once by default.
          */
          retries:
            (process.env.GRAPH_QL_SERVICE_RETRIES && parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) ||
            0,
    })
    ```

2. In the file where you want to fetch the data, import and use your new layout service instance:

    ```csharp
    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.