1. JSS Dictionary APIを使用したディクショナリ データの取得

カスタムRESTデータ フェッチャーを使用したディクショナリ データのフェッチ

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

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

RestDictionaryServiceConfig型はdataFetcherプロパティを受け入れます。このプロパティを使用して、カスタム・データ・フェッチャーをディクショナリ・サービスのインスタンスに渡すことができます。デフォルトでは、JSS REST DictionaryサービスはNativeDataFetcher.

メモ

この例では、アプリケーションのルートディレクトリにファイルを作成し、そのディレクトリにconfig.jsファイルがあることを前提としています。必要に応じてimportステートメントを調整し、プロジェクトの設定を反映させます。

RESTディクショナリ サービスをカスタム データ フェッチャーと共に使用するには:

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

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

      import { 
  NativeDataFetcher,
  NativeDataFetcherResponse,
  RestDictionaryService,
  DictionaryServiceData
} from '@sitecore-jss/sitecore-jss';
import config from './config';
// define your custom data fetcher
function dataFetcher(url: string, data?: RequestInit): Promise<NativeDataFetcherResponse<DictionaryServiceData>> {
  return new NativeDataFetcher().fetch(url, data);
}
export const dictionaryService = new RestDictionaryService({
  apiHost: config.sitecoreApiHost,
  apiKey: config.sitecoreApiKey,
  siteName: config.jssAppName,
  // provide your custom data fetcher to the service instance
  dataFetcher
});

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

      import { AxiosResponse } from 'axios';
import { 
  AxiosDataFetcher,
  RestDictionaryService,
  DictionaryServiceData
} from '@sitecore-jss/sitecore-jss';
import config from './config';

// define your custom data fetcher
function dataFetcher(url: string, data?: unknown): Promise<AxiosResponse<DictionaryServiceData>> {
  return new AxiosDataFetcher().fetch(url, data);
}

export const dictionaryService = new RestDictionaryService({
  apiHost: config.sitecoreApiHost,
  apiKey: config.sitecoreApiKey,
  siteName: config.jssAppName,
  // provide your custom data fetcher to the service instance
  dataFetcher
});

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

    import { dictionaryService } from './dictionary-service';

const language = 'en';

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