Promise based DataLoader implementation for Remix

PromiseLoader.ts

// ./server/index.js
createRequestHandler({
  build,
  mode: MODE,
  getLoadContext() {
    return {
      loader: PromiseLoader(),
    };
  },
})(req, res, next);

// ./app/routes/index.tsx
export const loader: LoaderFunction = async ({ request, context }) => {
  const sdkInstance = await getSDKInstance(request);

  return {
    user: await context.loader.load(["user", () => sdkInstance.user.get()]),
  };
};

// ./utils/promiseLoader.ts
import DataLoader from "dataloader";

type PromiseLoaderKey = [cacheKey: string, promise: () => Promise<unknown>];

export function PromiseLoader() {
  return new DataLoader<PromiseLoaderKey, Response, string>(promiseLoader, {
    cacheKeyFn: ([cacheKey]) => cacheKey,
  });
}

function promiseLoader(keys: PromiseLoaderKey[]) {
  return new Promise((resolve, reject) => {
    const values = Promise.all(
      keys.map(async ([cacheKey, promise]) => {
        console.log("[PromiseLoader] Awaiting Promise: ", cacheKey);
        return await promise();
      })
    );

    resolve(values);
  });
}