A Loader in deco.cx is a function that returns data needed for a Site.
/loaders/
folder of your project,
but it’s also possible to
Installing apps that contain
loaders.
In addition to fetching data, Loaders in deco.cx can also export a
Typescript Props type, which allows them to be configured in the
Admin just like Sections.
This means that business users can configure details about how the Loader will
operate, such as setting up filters or passing parameters to APIs. By making
Loaders configurable in this way, it becomes easier to manage the data flowing
into Sections and ensure that the Site is displaying the right information to
visitors.
One other great benefit of Loaders in deco.cx is that multiple loaders can
return the same data type. This allows Sections
that receive, for example, an array of canonical Product to get data from
different Loaders, depending on the user’s configuration. This means that UIs
can be reused across Sites or across teams, making it
easier to manage and scale your project.
All Sections for ecommerce stores created by deco.cx in the Storefront start use a canonical Product type, and also every Loader that connects to ecommerce providers’s APIs. This means that you can reuse the same UI to show data from different places, depending on the configuration.
shopify/loaders/ProductList.ts
Loader: