PRO

Effect DataLoader Batch

The batching loader that turns an N+1 query storm into two queries. Rendering 100 posts that each fetch their author fires 1 query for posts and 100 for authors; a loader collects every key requested within one tick and issues a single WHERE id IN (...) query, so N+1 becomes 2. Identical keys in a batch are deduped so a shared author is fetched once, and the one batched result scatters back to the exact callers that asked. Pending requests accumulate in a Ref, the first schedules a microtask flush that drains atomically, and each caller's Deferred is resolved from the result map. The demo collapses 100 author lookups to 1 query for 3 distinct ids. Pinned to effect 4.0.0-beta.98.

Install
npx shadcn@latest add https://ui.aryank.space/r/effect-dataloader-batch.json

Installs from ui.aryank.space. To add it by hand, copy the files in Files below, or register the @compronents namespace via the docs.

Visualization
loading
load author
readonly Post[]
database queries
1
posts.map(p => db.author(p.authorId)) // 100 queries

Rendering 100 posts that each fetch their author fires 1 query for the posts and 100 for the authors. The code reads naturally; the database sees a storm of single-row lookups.

Files

Dependencies