@rdub/duckdb

DuckDB utilities for React apps: SSR and table querying from client and server

API

• Db class (db.ts)
  • client/db.ts: implement Db with duckdb-wasm
  • server/db.ts: implement Db with duckdb-async, falling back to duckdb-lambda-x86 (see duckdb-node#15)
• initDuckDb, runQuery: React hooks
  • client/duckdb.ts: implement with duckdb.js and duckdb-wasm
  • server/duckdb.ts: implement with duckdb and duckdb-async (for cross-platform initDuckDb)
• TableData (table-data.ts): helpers for querying CSV or Parquet files
  • client/table-data.ts: register + query TableData objects
  • server/table-data.ts: create TableData pointing to files on disk (for passing to client).

Examples

crashes.hudcostreets.org

Demo: plot constructed from two remote Parquet files:

• useCsvTable call, useTable call
• See also @rdub/next-plotly

iRe/www (interactive reports for Jupyter notebooks):

• makeTable: load {schema,size,head} from remote Parquet file (example use)
• tablePage: fetch page from remote Parquet file (example use)

Use with Next.js

Inspired by next.js#46493 / node.bcrypt.js#979, you probably want this Webpack config in order to access duckdb-lambda-x86 from a Next.js app:

 /** @type {import('next').NextConfig} */
 const nextConfig = {
   …,
+  webpack: (config) => {
+    config.externals = [...config.externals, 'duckdb', 'duckdb-lambda-x86'];
+    return config;
+  },
 };
 
 module.exports = nextConfig;

Otherwise you'll see errors like:

./node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html Module parse failed: Unexpected token (1:0)