JSS Layout API を使用したレイアウト データのフェッチ

Version: 20.x
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore JSS には、Sitecore インスタンスからレイアウト データをフェッチできる Layout API が用意されています。

次の簡単な例では、JSS Layout API を使用して Sitecore インスタンスからレイアウト データを取得する方法を示します。

注記

JSS サンプル アプリケーションに基づいてプロジェクトをセット アップした場合、アプリケーションはすでにレイアウト データのフェッチを処理しています。

JSS GraphQL レイアウト サービスを使用したレイアウト データのフェッチ

GraphQL と JSS GraphQLLayoutService クラスを使用して、Sitecore からレイアウト データをフェッチできます。

JSS GraphQL レイアウト サービスを使用してレイアウト データをフェッチするには:

  1. layout-service.ts ファイルで、次を使用して GraphQLLayoutService クラスのインスタンスを作成および設定します。

    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
})

  2. データをフェッチするファイルで、新しいレイアウト サービス インスタンスをインポートして使用します。

    RequestResponse
    import { layoutService } from './layout-service';
const language = 'en';
layoutService.fetchLayoutData(language).then(data => {
    // do something with the data
});
ヒント

GraphQL レイアウト サービス インスタンスに formatLayoutQuery オプションを渡して、既定のクエリをオーバーライドできます。詳細については、GraphQLLayoutServiceConfig 型を参照してください。

JSS RESTレイアウト サービスを使用したレイアウト データのフェッチ

Sitecore からレイアウト データを取得するために使用できるエンドポイントの 1 つは、Sitecore ヘッドレス サービス によって提供される Sitecore レイアウト サービス です。JSS によって提供される RestLayoutService クラスを使用して提供されます。

Sitecore レイアウト サービスを使用する場合は、JSS REST レイアウト サービスの tracking プロパティの値を切り替えることで、ページ ビューの追跡を有効 (または無効) にすることもできます。

JSS を使用して JSS アプリケーションから Sitecore レイアウト サービスを呼び出すには、次の手順に従います。

  1. layout-service.ts ファイルで、RestLayoutService クラスとアプリ設定をインポートします。

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

  2. RestLayoutService のインスタンスを作成し、設定オブジェクト (RestLayoutServiceConfig 型) を指定します。

    RequestResponse
    export const layoutService = new RestLayoutService({
  apiHost: config.sitecoreApiHost,
  apiKey: config.sitecoreApiKey,
  siteName: config.jssAppName,
  // tracking: false // if you wish to disable tracking
});

  3. データをフェッチするファイルで、新しいレイアウト サービス インスタンスをインポートして使用します。

    RequestResponse
    import { layoutService } from './layout-service';

const language = 'en';
const sitecoreRoutePath = '/styleguide';

layoutService.fetchLayoutData(sitecoreRoutePath, language).then(data => {
     // do something with the data
});

既定の実装がニーズを満たさない場合、カスタム データ フェッチャーを使用できます。

カスタム REST データ フェッチャーを使用したレイアウト データのフェッチ

JSS RestLayoutServiceConfig 型は、dataFetcherResolver プロパティを受け入れます。このプロパティを使用して、レイアウト サービスのインスタンスにカスタム データ フェッチャーを渡すことができます。既定では、JSS REST レイアウト サービスは、axios を使用します。

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

  1. layout-service.ts ファイルで、RestLayoutService クラスのインスタンスを作成し、設定オブジェクトを指定します。

    RequestResponse
    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,
  tracking: false, // if you wish to disable tracking
  // provide your custom data fetcher to the service instance
  dataFetcherResolver: () => dataFetcher
});

  2. 新しいレイアウト サービスをインポートして使用します。

    RequestResponse
    import { layoutService } from './layout-service';

const language = 'en';
const sitecoreRoutePath = '/styleguide';

layoutService.fetchLayoutData(sitecoreRoutePath, language).then(data => {
     // do something with the data
});

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、