refactor: use batch-fetch pkg

package.json

···
 		"@floating-ui/utils": "^0.2.9",
 		"@mary/array-fns": "jsr:^0.1.4",
 		"@mary/async-iterator-fns": "jsr:^0.1.1",
+		"@mary/batch-fetch": "jsr:^0.1.0",
 		"@mary/date-fns": "jsr:^0.1.3",
 		"@mary/events": "jsr:^0.2.0",
 		"@mary/exif-rm": "jsr:^0.2.2",

pnpm-lock.yaml

···
       '@mary/async-iterator-fns':
         specifier: jsr:^0.1.1
         version: '@jsr/mary__async-iterator-fns@0.1.1'
+      '@mary/batch-fetch':
+        specifier: jsr:^0.1.0
+        version: '@jsr/mary__batch-fetch@0.1.0'
       '@mary/date-fns':
         specifier: jsr:^0.1.3
         version: '@jsr/mary__date-fns@0.1.3'
···
 
   '@jsr/mary__async-iterator-fns@0.1.1':
     resolution: {integrity: sha512-ef/TDpu6yGTAb4fbGEjSFPO7u49WrxJeXa9T6fvmjlpEfR84qxrjTR6MEUQ1hMySD0+O9yQKvBl/KL5x7K9+iA==, tarball: https://npm.jsr.io/~/11/@jsr/mary__async-iterator-fns/0.1.1.tgz}
+
+  '@jsr/mary__batch-fetch@0.1.0':
+    resolution: {integrity: sha512-A5SmTfDUMjr+AaJA+wFg4eKKVQm6/51CYTg5ssO+vcnaCJoP1Y0RURG6VkMno9QUholf3AAldfzRgQOXDZbFgg==, tarball: https://npm.jsr.io/~/11/@jsr/mary__batch-fetch/0.1.0.tgz}
 
   '@jsr/mary__date-fns@0.1.3':
     resolution: {integrity: sha512-kjS04BESEHO9ZTqjOxk4ip8DsAdVDmt/jC5V4zVIYq3VD/04+WJK9kjdQda23eVZMuF9ZZY0zMswU7UXG+PSrg==, tarball: https://npm.jsr.io/~/11/@jsr/mary__date-fns/0.1.3.tgz}
···
   '@jsr/mary__array-fns@0.1.4': {}
 
   '@jsr/mary__async-iterator-fns@0.1.1': {}
+
+  '@jsr/mary__batch-fetch@0.1.0': {}
 
   '@jsr/mary__date-fns@0.1.3': {}
 

src/lib/states/singletons/moderation.ts

···
 
 import type { AppBskyLabelerDefs, At } from '@atcute/client/lexicons';
 import { mapDefined } from '@mary/array-fns';
-import { createQueries } from '@mary/solid-query';
+import { createBatchedFetch } from '@mary/batch-fetch';
+import { type QueryFunctionContext as QC, createQueries } from '@mary/solid-query';
 
 import { BLUESKY_MODERATION_DID } from '~/api/defaults';
 import type { ModerationLabeler, ModerationOptions, ModerationPreferences } from '~/api/moderation';
 import { interpretLabelerDefinition } from '~/api/moderation/labeler';
-
-import { createBatchedFetch } from '~/lib/utils/batch-fetch';
 
 import { useAgent } from '../agent';
 import { useSession } from '../session';
···
 		return currentAccount.preferences.moderation;
 	});
 
-	const fetchLabeler = createBatchedFetch<At.Did, At.Did, ModerationLabeler>({
+	const fetchLabeler = createBatchedFetch<At.Did, ModerationLabeler>({
 		limit: 20,
 		timeout: 1,
-		idFromQuery: (query) => query,
-		idFromData: (data) => data.did,
-		async fetch(dids) {
+		idFromResource: (labeler) => labeler.did,
+		async fetch(dids, signal) {
 			const { data } = await rpc.get('app.bsky.labeler.getServices', {
+				signal,
 				params: {
 					dids: dids,
 					detailed: true,
···
 
 				return {
 					queryKey: ['labeler-definition', did],
-					queryFn: () => fetchLabeler(did),
+					queryFn: ({ signal }: QC) => fetchLabeler(did, signal),
 					staleTime: 21600000, // 6 hours
 					gcTime: 86400000, // 24 hours
 					refetchOnWindowFocus: true,

src/lib/utils/batch-fetch.ts

···
-// we would sometimes rely on fetching multiple individual posts, and it would
-// be preferrable if it can be batched.
-
-type Promisable<T> = T | Promise<T>;
-
-export type QueryId = string | number;
-
-export interface BatchedFetchOptions<Query, Id extends QueryId, Data> {
-	limit: number;
-	timeout: number;
-	fetch: (queries: Query[]) => Promisable<Data[]>;
-	key?: (query: Query) => string | number;
-	idFromQuery: (query: Query) => Id;
-	idFromData: (data: Data) => Id;
-}
-
-interface BatchedFetchMap<Query, Id, Data> {
-	key: string | number | undefined;
-	timeout: any;
-	queries: Query[];
-	pending: Map<Id, PromiseWithResolvers<Data>>;
-}
-
-export class ResourceMissingError extends Error {
-	name = 'ResourceMissingError';
-}
-
-/*#__NO_SIDE_EFFECTS__*/
-export const createBatchedFetch = <Query, Id extends QueryId, Data>(
-	options: BatchedFetchOptions<Query, Id, Data>,
-) => {
-	const { limit, timeout, fetch, key: _key, idFromData, idFromQuery } = options;
-
-	let curr: BatchedFetchMap<Query, Id, Data> | undefined;
-
-	return (query: Query): Promise<Data> => {
-		const id = idFromQuery(query);
-		const key = _key?.(query);
-
-		let map = curr;
-
-		if (!map || map.queries.length >= limit || map.key !== key) {
-			map = curr = {
-				key,
-				timeout: undefined,
-				queries: [],
-				pending: new Map(),
-			};
-		}
-
-		let deferred = map.pending.get(id);
-
-		if (!deferred) {
-			deferred = Promise.withResolvers<Data>();
-
-			map.queries.push(query);
-			map.pending.set(id, deferred);
-		}
-
-		clearTimeout(map.timeout);
-
-		map.timeout = setTimeout(() => {
-			if (curr === map) {
-				curr = undefined;
-			}
-
-			perform(map!, fetch, idFromData);
-		}, timeout);
-
-		return deferred.promise;
-	};
-};
-
-const perform = async <Query, Id extends QueryId, Data>(
-	map: BatchedFetchMap<Query, Id, Data>,
-	fetch: (queries: Query[]) => Promisable<Data[]>,
-	idFromData: (data: Data) => Id,
-) => {
-	const queries = map.queries;
-	const pending = map.pending;
-
-	let errored = false;
-
-	try {
-		const dataset = await fetch(queries);
-
-		for (const data of dataset) {
-			const id = idFromData(data);
-			const deferred = pending.get(id);
-
-			deferred?.resolve(data);
-		}
-	} catch (error) {
-		errored = true;
-
-		for (const deferred of pending.values()) {
-			deferred.reject(error);
-		}
-	} finally {
-		if (!errored) {
-			for (const deferred of pending.values()) {
-				deferred.reject(new ResourceMissingError());
-			}
-		}
-	}
-};