Um Loader em deco.cx é uma função Typescript que retorna tipicamente os
dados necessários em uma Section. Essas funções são
executadas antes da renderização de cada página e seu principal objetivo é
buscar dados de fontes externas, transformá-los se necessário e
fornecê-los às Seções do site que precisam. Os Loaders podem ser usados para
buscar dados de APIs, bancos de dados ou qualquer outra fonte externa. As
implementações locais de Loaders vivem na pasta /loaders do seu projeto, porém
é possível Instalar novas apps que
contém outros loaders.
Além de buscar dados, os Loaders na deco.cx também podem exportar um tipo de Props Typescript, o que permite que sejam configurados no Admin assim como as Sections. Isso significa que os usuários de negócio podem configurar detalhes sobre como o Loader irá operar, como configurar filtros ou passar parâmetros para APIs. Ao tornar os Loaders configuráveis dessa maneira, fica mais fácil gerenciar os dados que fluem para as Sections e garantir que o Site esteja exibindo as informações corretas para os visitantes.
Outro benefício dos Loaders na deco.cx é que vários loaders podem retornar o mesmo tipo de dados. Isso permite que as Sections que recebem, por exemplo, um array de Produtos canônico obtenham dados de diferentes Loaders, dependendo da configuração do usuário. Isso significa que as UIs podem ser reutilizadas em Sites ou entre times, facilitando o gerenciamento e a escala do seu projeto.
Todas as Sections para lojas de ecommerce criadas por deco.cx na Fashion usam um tipo de Produt canônico e também cada Loader que se conecta às APIs dos ecommerce providers. Isso significa que você pode reutilizar a mesma UI para mostrar dados de diferentes locais, dependendo da configuração.
Código de exemplo
Esta é a implementação do Loader shopify/loaders/ProductList.ts:
import type { Product } from "../../commerce/types.ts";
import { AppContext } from "../../shopify/mod.ts";
import { ListProducts } from "../utils/storefront/queries.ts";
import {
ListProductsQuery,
ListProductsQueryVariables,
} from "../utils/storefront/storefront.graphql.gen.ts";
import { toProduct } from "../utils/transform.ts";
export interface Props {
/** @description search term to use on search */
query: string;
/** @description total number of items to display */
count: number;
}
/**
* @title Shopify Integration
* @description Product List loader
*/
const loader = async (
props: Props,
_req: Request,
ctx: AppContext,
): Promise<Product[] | null> => {
const { storefront } = ctx;
const count = props.count ?? 12;
const query = props.query || "";
const data = await storefront.query<
ListProductsQuery,
ListProductsQueryVariables
>({
variables: { first: count, query },
...ListProducts,
});
// Transform Shopify product format into schema.org's compatible format
// If a property is missing from the final `products` array you can add
// it in here
const products = data?.products.nodes.map((p) =>
toProduct(p, p.variants.nodes[0], new URL(_req.url))
);
return products ?? [];
};
export default loader;