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

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

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

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

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

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

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

    • JSSバージョン22.4以降の場合は、次のNativeDataFetcherを使用します。

      import { 
  NativeDataFetcher,
  NativeDataFetcherResponse,
  RestLayoutService,
  LayoutServiceData
} from '@sitecore-jss/sitecore-jss';
import config from './config';
// define your custom data fetcher
function dataFetcher(url: string, data?: RequestInit): Promise<NativeDataFetcherResponse<LayoutServiceData>> {
  return new NativeDataFetcher().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
});

    • JSSバージョン22.3以前の場合は、次のAxiosDataFetcherを使用します。

      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. 新しいレイアウトサービスをインポートして使用します。

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

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

layoutService.fetchLayoutData(sitecoreRoutePath, language).then(data => {
     // do something with the data
});
この記事を改善するための提案がある場合は、 お知らせください!