DuckDB in Astro
David Gasquez
January 3, 2025
Wanted to play with the new DuckDB Node Neo library and thought it would be interesting to see if I could make it work in Astro. Astro supports MDX, so I thought it would be a good fit.
The query will be executed at build time and data rendered into a plain HTML file (no JS). Very useful to reference remote datasets (e.g: doing dashboards) while keeping things minimal. Let's see how it works!
The first thing I did was to install the DuckDB Node Neo library.
Then I created a new component called DuckDBQuery.astro that would take a query as a prop and execute it using the DuckDB Node Neo library.
The component creates a DuckDB instance, connects to it, runs the query, and then displays the results in a poorly formatted table.
Now, I can use the component in an MDX file.
That's it!
For example, let's run a query to get the total price for each customer for the orders.parquet file that DuckDB provides.
import DuckDBQuery from "../../components/DuckDBQuery.astro";
Rudimentary, but it works and is quite minimal.
A similar pattern can be done at the Astro Content Collection level to generate a page for each row of the dataset. E.g: get a list of countries, and build a page for each country with their stats from datasets like the World Development Indicators.
Thoughs, ideas, feedback? Reach out!
Discussion in the ATmosphere