PRO

SvelteKit Batched Query Refresh

N+1 elimination and single-flight mutations for SvelteKit remote functions, pinned to @sveltejs/kit 2.70.1. A query.batch collects the calls twenty components make in one macrotask into a single server invocation that returns a lookup callback, so ordering and duplicate arguments are handled for you. A remote form then publishes a record and calls requested(query, limit).refreshAll(), sending refreshed values back on the mutation response instead of paying a second round trip, and because the query is batched those refreshes collapse into one call. A command shows the manual alternative, iterating { arg, query } entries and using set() to write straight into the client cache with no refetch. Comments pin the 2.58.0 requested() reshape and the 2.61.0 removal of query.run().

Install
npx shadcn@latest add https://ui.aryank.space/r/sveltekit-batched-query-refresh.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
fetch strategy
q1
q2
q3 ... q20
const post = await getPost(id) // x20, one round trip each

Twenty components each call the query on mount and each call is its own server round trip. Watch them run one after another and watch the timers stack: the page paid twenty invocations for one screen of data.

Files

Dependencies