Función Fetching
Declaraciones de Funciones
Intlayer permite declarar funciones de contenido en sus módulos de contenido, las cuales pueden ser síncronas o asíncronas. Cuando la aplicación se construye, Intlayer ejecuta estas funciones para obtener el resultado de la función. El valor de retorno debe ser un objeto JSON o un valor simple como una cadena o un número.
Aquí hay un ejemplo de una función síncrona simple que obtiene contenido:
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: { text: () => "Este es el contenido renderizado por una función" },
6} satisfies DeclarationContent;
7
8export default functionContent;En este ejemplo, la clave text contiene una función que retorna una cadena. Este contenido puede ser renderizado en sus componentes de React utilizando los paquetes intérpretes de Intlayer como react-intlayer.
Obtención de Datos de Funciones Asíncronas
Además de las funciones síncronas, Intlayer soporta funciones asíncronas, permitiendo obtener datos de fuentes externas o simular la obtención de datos con datos ficticios.
A continuación, se muestra un ejemplo de una función asíncrona que simula una obtención de datos del servidor:
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // Espera 200ms para simular una obtención de datos del servidor
6 return await setTimeout(200).then(
7 () => "Este es el contenido obtenido del servidor"
8 );
9};
10
11const asyncFunctionContent = {
12 key: "async_function",
13 content: { text: fakeFetch },
14} satisfies DeclarationContent;
15
16export default asyncFunctionContent;En este caso, la función fakeFetch imita un retraso para simular el tiempo de respuesta del servidor. Intlayer ejecuta la función asíncrona y usa el resultado como el contenido para la clave text.
Uso de Contenido Basado en Funciones en Componentes de React
Para usar contenido basado en funciones en un componente de React, necesita importar useIntlayer desde react-intlayer y llamarlo con el ID del contenido para recuperar el contenido. Aquí hay un ejemplo:
1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4 const functionContent = useIntlayer("function_content");
5 const asyncFunctionContent = useIntlayer("async_function_content");
6
7 return (
8 <div>
9 <p>{functionContent.text}</p>
10 {/* Salida: Este es el contenido renderizado por una función */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* Salida: Este es el contenido obtenido del servidor */}
13 </div>
14 );
15};
16
17export default MyComponent;Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.
Enlace de GitHub a la documentación