Batch and Coalesce Fetch Calls in React

// Inspired by Facebook's DataLoader. The pattern: every load(id) call enqueues
// the id and returns a promise; on the next microtask, all queued ids are
// flushed in a single batchFn call and each promise resolves with its share
// of the result. Same id requested twice resolves twice from one fetch.

function createLoader(batchFn) {
    let pending = [];   // { id, resolve, reject }
    let scheduled = false;

    async function flush() {
        const batch = pending;
        pending = [];
        scheduled = false;
        try {
            const ids = [...new Set(batch.map((b) => b.id))];
            const result = await batchFn(ids);  // expected: { id: data } map
            for (const { id, resolve, reject } of batch) {
                if (id in result) resolve(result[id]);
                else reject(new Error(`loader: missing id ${id}`));
            }
        } catch (err) {
            for (const { reject } of batch) reject(err);
        }
    }

    return function load(id) {
        return new Promise((resolve, reject) => {
            pending.push({ id, resolve, reject });
            if (!scheduled) {
                scheduled = true;
                queueMicrotask(flush);
            }
        });
    };
}

// Pretend this is a /api/users?ids=1,2,3 endpoint.
let apiCalls = 0;
async function batchFetchUsers(ids) {
    apiCalls++;
    return Object.fromEntries(ids.map((id) => [id, { id, name: `user_${id}` }]));
}

const loadUser = createLoader(batchFetchUsers);

// 20 components each call loadUser. Most ids are duplicates.
const requests = [1, 2, 1, 3, 2, 4, 1, 5, 3, 2].map((id) => loadUser(id));
Promise.all(requests).then((results) => {
    console.log('completed:', results.length, ' api calls:', apiCalls);
    console.log('first:', results[0]);
});

// Pretend React hooks. The real hook would call useEffect, useState, etc.
// Here we use a tiny stub so the code runs in any JS environment.

function createLoader(batchFn) {
    let pending = [];
    let scheduled = false;
    async function flush() {
        const batch = pending; pending = []; scheduled = false;
        const ids = [...new Set(batch.map((b) => b.id))];
        const result = await batchFn(ids);
        for (const { id, resolve, reject } of batch) {
            if (id in result) resolve(result[id]);
            else reject(new Error(`missing ${id}`));
        }
    }
    return (id) => new Promise((resolve, reject) => {
        pending.push({ id, resolve, reject });
        if (!scheduled) { scheduled = true; queueMicrotask(flush); }
    });
}

let apiCalls = 0;
async function batchFetchUsers(ids) {
    apiCalls++;
    return Object.fromEntries(ids.map((id) => [id, { id, name: `user_${id}` }]));
}

// In real React: const loader = useMemo(() => createLoader(batchFetchUsers), []).
// One loader per request scope; never share across renders.
const loadUser = createLoader(batchFetchUsers);

// Mock React component: each 'mounts' and triggers loadUser(id).
async function UserCard(id) {
    const user = await loadUser(id);
    console.log(`card render id=${id} name=${user.name}`);
}

(async () => {
    await Promise.all([1, 2, 1, 3, 2, 4].map(UserCard));
    console.log('total api calls:', apiCalls);
})();

// Real APIs reject 'GET /users?ids=...' when the URL or POST body exceeds a
// limit. Cap the batch at maxBatchSize and emit several smaller batches.

function createLoader(batchFn, { maxBatchSize = 100 } = {}) {
    let pending = [];
    let scheduled = false;

    async function flush() {
        const queue = pending; pending = []; scheduled = false;
        // Split into chunks of maxBatchSize. Each chunk is one batchFn call.
        for (let off = 0; off < queue.length; off += maxBatchSize) {
            const chunk = queue.slice(off, off + maxBatchSize);
            const ids = [...new Set(chunk.map((b) => b.id))];
            try {
                const result = await batchFn(ids);
                for (const { id, resolve, reject } of chunk) {
                    if (id in result) resolve(result[id]);
                    else reject(new Error(`missing ${id}`));
                }
            } catch (err) {
                for (const { reject } of chunk) reject(err);
            }
        }
    }

    return (id) => new Promise((resolve, reject) => {
        pending.push({ id, resolve, reject });
        if (!scheduled) { scheduled = true; queueMicrotask(flush); }
    });
}

let apiCalls = 0;
async function batchFetchUsers(ids) {
    apiCalls++;
    console.log(`api call with ${ids.length} ids`);
    return Object.fromEntries(ids.map((id) => [id, { id, name: `u${id}` }]));
}

const loadUser = createLoader(batchFetchUsers, { maxBatchSize: 4 });

// 14 distinct ids should produce ceil(14 / 4) = 4 api calls.
const ids = Array.from({ length: 14 }, (_, i) => i + 1);
(async () => {
    await Promise.all(ids.map(loadUser));
    console.log('total api calls:', apiCalls);
})();