홈, 갤러리, 캐시 설정, 썸네일 설정 페이지에서의 네트워크 호출 최적화

src/lib/indexedDB/filesystem.ts

@@ -74,6 +74,10 @@ export const getFileInfo = async (id: number) => {
   return await filesystem.file.get(id);
 };
 
+export const bulkGetFileInfos = async (ids: number[]) => {
+  return await filesystem.file.bulkGet(ids);
+};
+
 export const storeFileInfo = async (fileInfo: FileInfo) => {
   await filesystem.file.put(fileInfo);
 };

src/lib/modules/filesystem/file.ts

@@ -31,6 +31,38 @@ const fetchFromIndexedDB = async (id: number) => {
   }
 };
 
+const bulkFetchFromIndexedDB = async (ids: number[]) => {
+  const files = await IndexedDB.bulkGetFileInfos(ids);
+  const categories = await Promise.all(
+    files.map(async (file) =>
+      file
+        ? await Promise.all(
+            file.categoryIds.map(async (categoryId) => {
+              const category = await IndexedDB.getCategoryInfo(categoryId);
+              return category ? { id: category.id, name: category.name } : undefined;
+            }),
+          )
+        : undefined,
+    ),
+  );
+  return new Map(
+    files
+      .map((file, index) =>
+        file
+          ? ([
+              file.id,
+              {
+                ...file,
+                exists: true,
+                categories: categories[index]!.filter((category) => !!category),
+              },
+            ] as const)
+          : undefined,
+      )
+      .filter((file) => !!file),
+  );
+};
+
 const fetchFromServer = async (id: number, masterKey: CryptoKey) => {
   try {
     const { categories: categoriesRaw, ...metadata } = await trpc().file.get.query({ id });
@@ -61,6 +93,35 @@ const fetchFromServer = async (id: number, masterKey: CryptoKey) => {
   }
 };
 
+const bulkFetchFromServer = async (ids: number[], masterKey: CryptoKey) => {
+  const filesRaw = await trpc().file.bulkGet.query({ ids });
+  const files = await Promise.all(
+    filesRaw.map(async (file) => {
+      const categories = await Promise.all(
+        file.categories.map(async (category) => ({
+          id: category.id,
+          ...(await decryptCategoryMetadata(category, masterKey)),
+        })),
+      );
+      return {
+        id: file.id,
+        exists: true as const,
+        parentId: file.parent,
+        contentType: file.contentType,
+        contentIv: file.contentIv,
+        categories,
+        ...(await decryptFileMetadata(file, masterKey)),
+      };
+    }),
+  );
+
+  const existingIds = new Set(filesRaw.map(({ id }) => id));
+  return new Map<number, MaybeFileInfo>([
+    ...files.map((file) => [file.id, file] as const),
+    ...ids.filter((id) => !existingIds.has(id)).map((id) => [id, { id, exists: false }] as const),
+  ]);
+};
+
 export const getFileInfo = async (id: number, masterKey: CryptoKey) => {
   return await cache.get(id, (isInitial, resolve) =>
     monotonicResolve(
@@ -69,3 +130,22 @@ export const getFileInfo = async (id: number, masterKey: CryptoKey) => {
     ),
   );
 };
+
+export const bulkGetFileInfo = async (ids: number[], masterKey: CryptoKey) => {
+  return await cache.bulkGet(new Set(ids), (keys, resolve) =>
+    monotonicResolve(
+      [
+        bulkFetchFromIndexedDB(
+          Array.from(
+            keys
+              .entries()
+              .filter(([, isInitial]) => isInitial)
+              .map(([key]) => key),
+          ),
+        ),
+        bulkFetchFromServer(Array.from(keys.keys()), masterKey),
+      ],
+      resolve,
+    ),
+  );
+};

src/lib/modules/filesystem/internal.svelte.ts

@@ -17,7 +17,7 @@ export class FilesystemCache<K, V extends RV, RV = V> {
     loader(!info, (loadedInfo) => {
       if (!loadedInfo) return;
 
-      let info = this.map.get(key)!;
+      const info = this.map.get(key)!;
       if (info instanceof Promise) {
         const state = $state(loadedInfo);
         this.map.set(key, state as V);
@@ -30,6 +30,54 @@ export class FilesystemCache<K, V extends RV, RV = V> {
 
     return info ?? promise;
   }
+
+  async bulkGet(
+    keys: Set<K>,
+    loader: (keys: Map<K, boolean>, resolve: (values: Map<K, RV>) => void) => void,
+  ) {
+    const states = new Map<K, V>();
+    const promises = new Map<K, Promise<V>>();
+    const resolvers = new Map<K, (value: V) => void>();
+
+    keys.forEach((key) => {
+      const info = this.map.get(key);
+      if (info instanceof Promise) {
+        promises.set(key, info);
+      } else if (info) {
+        states.set(key, info);
+      } else {
+        const { promise, resolve } = Promise.withResolvers<V>();
+        this.map.set(key, promise);
+        promises.set(key, promise);
+        resolvers.set(key, resolve);
+      }
+    });
+
+    loader(
+      new Map([
+        ...states.keys().map((key) => [key, false] as const),
+        ...resolvers.keys().map((key) => [key, true] as const),
+      ]),
+      (loadedInfos) =>
+        loadedInfos.forEach((loadedInfo, key) => {
+          const info = this.map.get(key)!;
+          const resolve = resolvers.get(key);
+          if (info instanceof Promise) {
+            const state = $state(loadedInfo);
+            this.map.set(key, state as V);
+            resolve?.(state as V);
+          } else {
+            Object.assign(info, loadedInfo);
+            resolve?.(info);
+          }
+        }),
+    );
+
+    const newStates = await Promise.all(
+      promises.entries().map(async ([key, promise]) => [key, await promise] as const),
+    );
+    return new Map([...states, ...newStates]);
+  }
 }
 
 export const decryptDirectoryMetadata = async (

src/lib/server/db/file.ts

@@ -1,4 +1,5 @@
 import { sql } from "kysely";
+import { jsonArrayFrom } from "kysely/helpers/postgres";
 import pg from "pg";
 import { IntegrityError } from "./error";
 import db from "./kysely";
@@ -36,6 +37,14 @@ interface File {
 
 export type NewFile = Omit<File, "id">;
 
+interface FileCategory {
+  id: number;
+  mekVersion: number;
+  encDek: string;
+  dekVersion: Date;
+  encName: Ciphertext;
+}
+
 export const registerDirectory = async (params: NewDirectory) => {
   await db.transaction().execute(async (trx) => {
     const mek = await trx
@@ -400,6 +409,51 @@ export const getFile = async (userId: number, fileId: number) => {
     : null;
 };
 
+export const getFilesWithCategories = async (userId: number, fileIds: number[]) => {
+  const files = await db
+    .selectFrom("file")
+    .selectAll()
+    .select((eb) =>
+      jsonArrayFrom(
+        eb
+          .selectFrom("file_category")
+          .innerJoin("category", "file_category.category_id", "category.id")
+          .where("file_category.file_id", "=", eb.ref("file.id"))
+          .selectAll("category"),
+      ).as("categories"),
+    )
+    .where("id", "=", (eb) => eb.fn.any(eb.val(fileIds)))
+    .where("user_id", "=", userId)
+    .execute();
+  return files.map(
+    (file) =>
+      ({
+        id: file.id,
+        parentId: file.parent_id ?? "root",
+        userId: file.user_id,
+        path: file.path,
+        mekVersion: file.master_encryption_key_version,
+        encDek: file.encrypted_data_encryption_key,
+        dekVersion: file.data_encryption_key_version,
+        hskVersion: file.hmac_secret_key_version,
+        contentHmac: file.content_hmac,
+        contentType: file.content_type,
+        encContentIv: file.encrypted_content_iv,
+        encContentHash: file.encrypted_content_hash,
+        encName: file.encrypted_name,
+        encCreatedAt: file.encrypted_created_at,
+        encLastModifiedAt: file.encrypted_last_modified_at,
+        categories: file.categories.map((category) => ({
+          id: category.id,
+          mekVersion: category.master_encryption_key_version,
+          encDek: category.encrypted_data_encryption_key,
+          dekVersion: new Date(category.data_encryption_key_version),
+          encName: category.encrypted_name,
+        })),
+      }) satisfies File & { categories: FileCategory[] },
+  );
+};
+
 export const setFileEncName = async (
   userId: number,
   fileId: number,
@@ -490,13 +544,16 @@ export const getAllFileCategories = async (fileId: number) => {
     .selectAll("category")
     .where("file_id", "=", fileId)
     .execute();
-  return categories.map((category) => ({
-    id: category.id,
-    mekVersion: category.master_encryption_key_version,
-    encDek: category.encrypted_data_encryption_key,
-    dekVersion: category.data_encryption_key_version,
-    encName: category.encrypted_name,
-  }));
+  return categories.map(
+    (category) =>
+      ({
+        id: category.id,
+        mekVersion: category.master_encryption_key_version,
+        encDek: category.encrypted_data_encryption_key,
+        dekVersion: category.data_encryption_key_version,
+        encName: category.encrypted_name,
+      }) satisfies FileCategory,
+  );
 };
 
 export const removeFileFromCategory = async (fileId: number, categoryId: number) => {