फ़ंक्शन फ़ेचिंग

Intlayer आपको अपनी सामग्री मॉड्यूल में सामग्री फ़ंक्शन घोषित करने की अनुमति देता है, जो या तो सिंक्रोनस या असिंक्रोनस हो सकते हैं। जब एप्लिकेशन बनता है, तो Intlayer इन फ़ंक्शनों को निष्पादित करता है ताकि फ़ंक्शन का परिणाम प्राप्त किया जा सके। रिटर्न मान एक JSON ऑब्जेक्ट या एक सरल मान होना चाहिए जैसे स्ट्रिंग या नंबर।

चेतावनी: फ़ंक्शन फ़ेचिंग वर्तमान में JSON सामग्री घोषणा और दूरस्थ सामग्री घोषणा फ़ाइलों में उपलब्ध नहीं है।

फ़ंक्शन घोषणाएँ

यहाँ एक सरल सिंक्रोनस फ़ंक्शन फ़ेचिंग सामग्री का उदाहरण है:

import type { Dictionary } from "intlayer";

const functionContent = {
  key: "function_content",
  content: {
    text: () => "यह सामग्री एक फ़ंक्शन द्वारा प्रस्तुत की गई है",
  },
} satisfies Dictionary;

export default functionContent;

इस उदाहरण में, text कुंजी में एक फ़ंक्शन होता है जो एक स्ट्रिंग लौटाता है। इस सामग्री को आप Intlayer के इंटरप्रेटर पैकेज जैसे react-intlayer का उपयोग करके अपने React कॉम्पोनेंट्स में प्रस्तुत कर सकते हैं।

असिंक्रोनस फ़ंक्शन फ़ेचिंग

सिंक्रोनस फ़ंक्शंस के अलावा, Intlayer असिंक्रोनस फ़ंक्शंस का भी समर्थन करता है, जिससे आप बाहरी स्रोतों से डेटा प्राप्त कर सकते हैं या मॉक डेटा के साथ डेटा पुनःप्राप्ति का अनुकरण कर सकते हैं।

नीचे एक असिंक्रोनस फ़ंक्शन का उदाहरण दिया गया है जो सर्वर से डेटा प्राप्त करने का अनुकरण करता है:

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 कुंजी के लिए सामग्री के रूप में उपयोग करता है।

रिमोट सामग्री प्राप्त करना

आप किसी सामग्री फ़ील्ड को सीधे एक प्रॉमिस भी सौंप सकते हैं। Intlayer डिक्शनरी बनाते समय उसका इंतज़ार करता है और हल हुए मान को उसमें शामिल कर देता है:

import type { Dictionary } from "intlayer";

const remoteContent = {
  key: "remote_content",
  content: {
    externalContent: fetch("https://example.com").then((res) => res.json()),
  },
} satisfies Dictionary;

export default remoteContent;

अनुरोध बिल्ड समय पर चलता है, इसलिए प्राप्त डेटा डिक्शनरी में एम्बेड किया गया एक स्नैपशॉट होता है। इसे ताज़ा करने के लिए अपनी डिक्शनरी दोबारा बनाएं।

React घटकों में फ़ंक्शन-आधारित सामग्री का उपयोग करना

React घटक में फ़ंक्शन-आधारित सामग्री का उपयोग करने के लिए, आपको react-intlayer से useIntlayer आयात करना होगा और सामग्री प्राप्त करने के लिए इसे सामग्री आईडी के साथ कॉल करना होगा। यहाँ एक उदाहरण है:

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;