---
title: "JSS GraphQLレイアウトサービスでレイアウトデータを取得"
slug: "fetch-layout-data-with-the-jss-graphql-layout-service"
abstract: "JSS GraphQLレイアウトサービスでSitecoreレイアウトデータを取得する方法の例です。"
---
# JSS GraphQLレイアウトサービスでレイアウトデータを取得

GraphQLとJSS GraphQLLayoutServiceクラスを使ってSitecoreからレイアウトデータを取得できます。

JSS GraphQLレイアウトサービスでレイアウトデータを取得するには:

1.  layout-service.tsファイルでは、GraphQLLayoutServiceクラスのインスタンスを作成・設定します:
    
    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
    })
    
2.  データを取得したいファイルで、新しいレイアウトサービスインスタンスをインポートして使用します:
    
    import { layoutService } from './layout-service';
    const language = 'en';
    layoutService.fetchLayoutData(language).then(data => {
     // do something with the data
    });
    

> !ヒントデフォルトのクエリを上書きするためにGraphQLLayoutServiceインスタンスにformatLayoutQueryオプションを渡すことができます。詳細はGraphQLLayoutServiceConfigタイプをご覧ください。