Fetching data?

[Adam-Collier]

Hey! I may be missing the mark here completely but is it not possible to fetch data and build it static? The use case here is using lume to fetch data and output json files, essentially creating a static API

[oscarotero]

Yes, sure. If you only want to use the data to generate json files, you can create a pages from a js/ts file:

// ./api.tmpl.js

// Fetch your data from anywhere
const response = await fetch("https://my-api.com/data.json");
const data = await response.json();

// Export it as you want. You even can generate multiple files using a generator
export default function * () {
    for (const item of data) {
        yield {
          url: `/api/${item.id}.json`,
          content: JSON.stringify(item),
        }
    }
}

More info here: https://lume.land/docs/core/multiple-pages/

---

If you want to reuse this data in other pages, you may want to import them from a _data file:

// ./_data/api.js

// Fetch your data from anywhere
const response = await fetch("https://my-api.com/data.json");
const data = await response.json();

// Export it with the desired format
export default data;

Now you can access to this data from any page in the same (sub)folder:

<ul>
{% for item in api %}
    <li>{{ item.id }}</li>
{% endfor %}
</ul>

More info about shared data: https://lume.land/docs/creating-pages/shared-data/#the-_data-directories

[huangyuzhang]

Hello! On top of the question Adam-Collier mentioned, I'd like to check if Lume _data is capable of fetching data everytime the page loaded?

Say I want to check the current BTC price from a public API, can I call this data whenever certain pages are loaded?

[oscarotero]

You can try the on_demand plugin, that allows to render a page every time it's requested.
Another option is fetching the data and update the HTML in the browser.