Module Middleware/Batcher

This depends on @edgefirst-dev/batcher.

The batcher middleware let's you get a per request instance of a batcher object that will dedupe and batch multiple calls to the same function.

This is specially useful to avoid making multiple API calls to the same endpoint in a single request, or DB queries. The batcher will call the function only once and return the same result to all calls.

import { unstable_createBatcherMiddleware } from "remix-utils/middleware/batcher";

export const [batcherMiddleware, getBatcher] =
  unstable_createBatcherMiddleware();
Copy

To use it, you need to add it to the unstable_middleware array in the route where you want to use it.

import { batcherMiddleware } from "~/middleware/batcher.server";
export const unstable_middleware = [batcherMiddleware];
Copy

And you can use the getBatcher function in your loaders to get the batcher object.

import { getBatcher } from "~/middleware/batcher.server";

export async function loader({ context }: LoaderFunctionArgs) {
  let batcher = getBatcher(context);
  let result = await batcher.batch("key", async () => {
    return await getData();
  });
  // ...
}
Copy

If you move your batcher.batch call to a separate function, you can use it in different route loaders and actions, and the batcher will still dedupe the calls.

import type { Batcher } from "remix-utils/middleware/batcher";
import { getData } from "~/data";

export function getDataBatched(batcher: Batcher) {
  return batcher.batch("key", async () => {
    return await getData();
  });
}
Copy

Then you can call it in any route loader who has access to the batcher.

import { getBatcher } from "~/middleware/batcher.server";
import { getDataBatched } from "~/data";

export async function loader({ context }: LoaderFunctionArgs) {
  let batcher = getBatcher(context);
  let result = await getDataBatched(batcher);
  // ...
}
Copy