---
title: "カスタムRESTデータフェッチャーによるレイアウトデータの取得"
slug: "fetch-layout-data-using-a-custom-rest-data-fetcher"
abstract: "JSS Layout APIとカスタムRESTデータフェッチャーを使ってSitecoreレイアウトデータを取得する方法の例です。"
---
# カスタムRESTデータフェッチャーによるレイアウトデータの取得

JSS RestLayoutServiceConfig型はdataFetcherResolverプロパティを受け入れます。このプロパティを使ってカスタムデータフェッチャーをLayout Serviceのインスタンスに渡すことができます。デフォルトでは、JSS REST Layoutサービスは[axios](https://www.npmjs.com/package/axios)を使用します。

カスタムデータフェッチャーでRESTレイアウトサービスを使用するには:

1.  layout-service.tsファイル内で、RestLayoutServiceクラスのインスタンスを作成し、構成オブジェクトを提供します:
    
    import { AxiosResponse } from 'axios';
    import {
     AxiosDataFetcher,
     RestLayoutService,
     LayoutServiceData
    } from '@sitecore-jss/sitecore-jss';
    import config from './config';
    
    // define your custom data fetcher
    function dataFetcher(url: string, data?: unknown): Promise<AxiosResponse<LayoutServiceData>> {
     return new AxiosDataFetcher().fetch(url, data);
    }
    
    export const layoutService = new RestLayoutService({
     apiHost: config.sitecoreApiHost,
     apiKey: config.sitecoreApiKey,
     siteName: config.jssAppName,
     // provide your custom data fetcher to the service instance
     dataFetcherResolver: () => dataFetcher
    });
    
2.  新しいレイアウトサービスをインポートして利用してください:
    
    import { layoutService } from './layout-service';
    
    const language = 'en';
    const sitecoreRoutePath = '/styleguide';
    
    layoutService.fetchLayoutData(sitecoreRoutePath, language).then(data => {
     // do something with the data
    });