関数フェッチング
Intlayerを使用すると、コンテンツモジュール内で同期または非同期のコンテンツ関数を宣言できます。アプリケーションがビルドされると、Intlayerはこれらの関数を実行して関数の結果を取得します。戻り値はJSONオブジェクト、または文字列や数値のような単純な値である必要があります。
警告: 関数フェッチングは現在、JSONコンテンツ宣言およびリモートコンテンツ宣言ファイルでは利用できません。
関数宣言
以下は、シンプルな同期関数でコンテンツをフェッチする例です:
**/*.content.ts
import type { Dictionary } from "intlayer";const functionContent = { key: "function_content", content: { text: () => "これは関数によってレンダリングされたコンテンツです", },} satisfies Dictionary;export default functionContent;この例では、textキーに文字列を返す関数が含まれています。このコンテンツは、Intlayerのreact-intlayerのようなインタープリターパッケージを使用してReactコンポーネント内でレンダリングできます。
非同期関数フェッチング
同期関数に加えて、Intlayerは非同期関数もサポートしており、外部ソースからデータをフェッチしたり、モックデータでデータ取得をシミュレートしたりすることができます。
以下は、サーバーフェッチをシミュレートする非同期関数の例です:
**/*.content.ts
import { setTimeout } from "node:timers/promises";import type { Dictionary } from "intlayer";const fakeFetch = async (): Promise<string> => { // サーバーからのフェッチをシミュレートするために200ms待機 return await setTimeout(200).then( () => "これはサーバーからフェッチされたコンテンツです" );};const asyncFunctionContent = { key: "async_function", content: { text: fakeFetch },} satisfies Dictionary;export default asyncFunctionContent;この場合、fakeFetch関数はサーバー応答時間をシミュレートするための遅延を模倣します。Intlayerは非同期関数を実行し、その結果をtextキーのコンテンツとして使用します。
Reactコンポーネントで関数ベースのコンテンツを使用する
Reactコンポーネントで関数ベースのコンテンツを使用するには、react-intlayerからuseIntlayerをインポートし、コンテンツIDを使用してコンテンツを取得します。以下はその例です:
**/*.jsx
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => { const functionContent = useIntlayer("function_content"); const asyncFunctionContent = useIntlayer("async_function_content"); return ( <div> <p>{functionContent.text}</p> {/* 出力: これは関数によってレンダリングされたコンテンツです */} <p>{asyncFunctionContent.text}</p> {/* 出力: これはサーバーからフェッチされたコンテンツです */} </div> );};export default MyComponent;このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンク