SSR을 비활성화하여 SPA로 전환

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
+    "dev:remote": "__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=.ts.net vite dev --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

src/lib/modules/file/thumbnail.ts

@@ -1,6 +1,5 @@
 import { LRUCache } from "lru-cache";
 import { writable, type Writable } from "svelte/store";
-import { browser } from "$app/environment";
 import { decryptChunk } from "$lib/modules/crypto";
 import type { SummarizedFileInfo } from "$lib/modules/filesystem";
 import { readFile, writeFile, deleteFile, deleteDirectory } from "$lib/modules/opfs";
@@ -27,10 +26,7 @@ const fetchFromServer = async (fileId: number, dataKey: CryptoKey) => {
 };
 
 export const getFileThumbnail = (file: SummarizedFileInfo) => {
-  if (
-    !browser ||
-    !(file.contentType.startsWith("image/") || file.contentType.startsWith("video/"))
-  ) {
+  if (!(file.contentType.startsWith("image/") || file.contentType.startsWith("video/"))) {
     return undefined;
   }
 

src/lib/modules/file/upload.svelte.ts

@@ -60,7 +60,7 @@ const requestDuplicateFileScan = limitFunction(
     state.status = "encryption-pending";
 
     const fileSigned = encodeToBase64(await signMessageHmac(file, hmacSecret.secret));
-    const files = await trpc().file.listByHash.query({
+    const files = await trpc.file.listByHash.query({
       hskVersion: hmacSecret.version,
       contentHmac: fileSigned,
     });
@@ -134,7 +134,7 @@ const requestFileMetadataEncryption = limitFunction(
         generateThumbnail(file).then((blob) => blob?.arrayBuffer()),
       ]);
 
-    const { uploadId } = await trpc().upload.startFileUpload.mutate({
+    const { uploadId } = await trpc.upload.startFileUpload.mutate({
       chunks: Math.ceil(file.size / CHUNK_SIZE),
       parent: fileMetadata.parentId,
       mekVersion: masterKey.version,
@@ -175,7 +175,7 @@ const requestFileUpload = limitFunction(
       },
     });
 
-    const { file: fileId } = await trpc().upload.completeFileUpload.mutate({
+    const { file: fileId } = await trpc.upload.completeFileUpload.mutate({
       uploadId,
       contentHmac: fileSigned,
       encContentHash,
@@ -183,14 +183,14 @@ const requestFileUpload = limitFunction(
 
     if (thumbnailBuffer) {
       try {
-        const { uploadId } = await trpc().upload.startFileThumbnailUpload.mutate({
+        const { uploadId } = await trpc.upload.startFileThumbnailUpload.mutate({
           file: fileId,
           dekVersion: dataKeyVersion,
         });
 
         await uploadBlob(uploadId, new Blob([thumbnailBuffer]), dataKey);
 
-        await trpc().upload.completeFileThumbnailUpload.mutate({ uploadId });
+        await trpc.upload.completeFileThumbnailUpload.mutate({ uploadId });
       } catch (e) {
         console.error(e);
       }

src/lib/modules/filesystem/category.ts

@@ -50,7 +50,7 @@ const cache = new FilesystemCache<CategoryId, MaybeCategoryInfo>({
 
   async fetchFromServer(id, cachedInfo, masterKey) {
     try {
-      const category = await trpc().category.get.query({ id, recurse: true });
+      const category = await trpc.category.get.query({ id, recurse: true });
       const [subCategories, files, metadata] = await Promise.all([
         Promise.all(
           category.subCategories.map(async (category) => ({

src/lib/modules/filesystem/directory.ts

@@ -33,7 +33,7 @@ const cache = new FilesystemCache<DirectoryId, MaybeDirectoryInfo>({
 
   async fetchFromServer(id, _cachedInfo, masterKey) {
     try {
-      const directory = await trpc().directory.get.query({ id });
+      const directory = await trpc.directory.get.query({ id });
       const [subDirectories, files, metadata] = await Promise.all([
         Promise.all(
           directory.subDirectories.map(async (directory) => ({

src/lib/modules/filesystem/file.ts

@@ -34,7 +34,7 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
 
   async fetchFromServer(id, _cachedInfo, masterKey) {
     try {
-      const file = await trpc().file.get.query({ id });
+      const file = await trpc.file.get.query({ id });
       const [categories, metadata] = await Promise.all([
         Promise.all(
           file.categories.map(async (category) => ({
@@ -101,7 +101,7 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
   async bulkFetchFromServer(ids, masterKey) {
     const idsArray = [...ids.keys()];
 
-    const filesRaw = await trpc().file.bulkGet.query({ ids: idsArray });
+    const filesRaw = await trpc.file.bulkGet.query({ ids: idsArray });
     const files = await Promise.all(
       filesRaw.map(async ({ id, categories: categoriesRaw, ...metadataRaw }) => {
         const [categories, metadata] = await Promise.all([

src/lib/server/middlewares/authenticate.ts

@@ -25,6 +25,12 @@ export const authenticateMiddleware: Handle = async ({ event, resolve }) => {
     throw e;
   }
 
+  if (event.url.pathname === "/auth/login") {
+    const redirectPath = event.url.searchParams.get("redirect");
+    // Allow same-origin paths only
+    redirect(302, redirectPath?.match(/^\/(?![/\\])/) ? redirectPath : "/home");
+  }
+
   return await resolve(event);
 };
 

src/lib/services/auth.ts

@@ -10,7 +10,7 @@ export const requestSessionUpgrade = async (
 ) => {
   let id, challenge;
   try {
-    ({ id, challenge } = await trpc().auth.upgrade.mutate({
+    ({ id, challenge } = await trpc.auth.upgrade.mutate({
       encPubKey: encryptKeyBase64,
       sigPubKey: verifyKeyBase64,
     }));
@@ -24,7 +24,7 @@ export const requestSessionUpgrade = async (
   const answerSig = await signMessageRSA(answer, signKey);
 
   try {
-    await trpc().auth.verifyUpgrade.mutate({
+    await trpc.auth.verifyUpgrade.mutate({
       id,
       answerSig: encodeToBase64(answerSig),
       force,
@@ -41,7 +41,7 @@ export const requestSessionUpgrade = async (
 
 export const requestLogout = async () => {
   try {
-    await trpc().auth.logout.mutate();
+    await trpc.auth.logout.mutate();
     return true;
   } catch {
     // TODO: Error Handling

src/lib/services/category.ts

@@ -11,7 +11,7 @@ export const requestCategoryCreation = async (
   const nameEncrypted = await encryptString(name, dataKey);
 
   try {
-    await trpc().category.create.mutate({
+    await trpc.category.create.mutate({
       parent: parentId,
       mekVersion: masterKey.version,
       dek: await wrapDataKey(dataKey, masterKey.key),
@@ -28,7 +28,7 @@ export const requestCategoryCreation = async (
 
 export const requestFileRemovalFromCategory = async (fileId: number, categoryId: number) => {
   try {
-    await trpc().category.removeFile.mutate({ id: categoryId, file: fileId });
+    await trpc.category.removeFile.mutate({ id: categoryId, file: fileId });
     return true;
   } catch {
     // TODO: Error Handling

src/lib/services/file.ts

@@ -29,14 +29,14 @@ export const requestFileThumbnailUpload = async (
   dataKeyVersion: Date,
 ) => {
   try {
-    const { uploadId } = await trpc().upload.startFileThumbnailUpload.mutate({
+    const { uploadId } = await trpc.upload.startFileThumbnailUpload.mutate({
       file: fileId,
       dekVersion: dataKeyVersion,
     });
 
     await uploadBlob(uploadId, thumbnail, dataKey);
 
-    await trpc().upload.completeFileThumbnailUpload.mutate({ uploadId });
+    await trpc.upload.completeFileThumbnailUpload.mutate({ uploadId });
     return true;
   } catch {
     // TODO: Error Handling
@@ -47,7 +47,7 @@ export const requestFileThumbnailUpload = async (
 export const requestDeletedFilesCleanup = async () => {
   let liveFiles;
   try {
-    liveFiles = await trpc().file.list.query();
+    liveFiles = await trpc.file.list.query();
   } catch {
     // TODO: Error Handling
     return;

src/lib/services/key.ts

@@ -19,13 +19,13 @@ export const requestClientRegistration = async (
   signKey: CryptoKey,
 ) => {
   try {
-    const { id, challenge } = await trpc().client.register.mutate({
+    const { id, challenge } = await trpc.client.register.mutate({
       encPubKey: encryptKeyBase64,
       sigPubKey: verifyKeyBase64,
     });
     const answer = await decryptChallenge(challenge, decryptKey);
     const answerSig = await signMessageRSA(answer, signKey);
-    await trpc().client.verify.mutate({
+    await trpc.client.verify.mutate({
       id,
       answerSig: encodeToBase64(answerSig),
     });
@@ -68,7 +68,7 @@ export const requestClientRegistrationAndSessionUpgrade = async (
 export const requestMasterKeyDownload = async (decryptKey: CryptoKey, verifyKey: CryptoKey) => {
   let masterKeysWrapped;
   try {
-    masterKeysWrapped = await trpc().mek.list.query();
+    masterKeysWrapped = await trpc.mek.list.query();
   } catch {
     // TODO: Error Handling
     return false;
@@ -106,7 +106,7 @@ export const requestInitialMasterKeyAndHmacSecretRegistration = async (
   signKey: CryptoKey,
 ) => {
   try {
-    await trpc().mek.registerInitial.mutate({
+    await trpc.mek.registerInitial.mutate({
       mek: masterKeyWrapped,
       mekSig: await signMasterKeyWrapped(masterKeyWrapped, 1, signKey),
     });
@@ -119,7 +119,7 @@ export const requestInitialMasterKeyAndHmacSecretRegistration = async (
   }
 
   try {
-    await trpc().hsk.registerInitial.mutate({
+    await trpc.hsk.registerInitial.mutate({
       mekVersion: 1,
       hsk: hmacSecretWrapped,
     });

src/routes/(fullscreen)/auth/changePassword/service.ts

@@ -2,7 +2,7 @@ import { trpc } from "$trpc/client";
 
 export const requestPasswordChange = async (oldPassword: string, newPassword: string) => {
   try {
-    await trpc().auth.changePassword.mutate({ oldPassword, newPassword });
+    await trpc.auth.changePassword.mutate({ oldPassword, newPassword });
     return true;
   } catch {
     // TODO: Error Handling

src/routes/(fullscreen)/auth/login/+page.server.ts

@@ -1,12 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async ({ locals, url }) => {
-  const redirectPath = url.searchParams.get("redirect") || "/home";
-
-  if (locals.session) {
-    redirect(302, redirectPath);
-  }
-
-  return { redirectPath };
-};

src/routes/(fullscreen)/auth/login/+page.ts

@@ -0,0 +1,6 @@
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ url }) => {
+  const redirectPath = url.searchParams.get("redirect") || "/home";
+  return { redirectPath };
+};

src/routes/(fullscreen)/auth/login/service.ts

@@ -9,7 +9,7 @@ export {
 
 export const requestLogin = async (email: string, password: string) => {
   try {
-    await trpc().auth.login.mutate({ email, password });
+    await trpc.auth.login.mutate({ email, password });
     return true;
   } catch {
     // TODO: Error Handling

src/routes/(fullscreen)/file/[id]/service.ts

@@ -41,7 +41,7 @@ export const requestThumbnailUpload = async (
 
 export const requestFileAdditionToCategory = async (fileId: number, categoryId: number) => {
   try {
-    await trpc().category.addFile.mutate({ id: categoryId, file: fileId });
+    await trpc.category.addFile.mutate({ id: categoryId, file: fileId });
     return true;
   } catch {
     // TODO: Error Handling
@@ -52,9 +52,9 @@ export const requestFileAdditionToCategory = async (fileId: number, categoryId:
 export const requestFavoriteToggle = async (fileId: number, isFavorite: boolean) => {
   try {
     if (isFavorite) {
-      await trpc().favorites.removeFile.mutate({ id: fileId });
+      await trpc.favorites.removeFile.mutate({ id: fileId });
     } else {
-      await trpc().favorites.addFile.mutate({ id: fileId });
+      await trpc.favorites.addFile.mutate({ id: fileId });
     }
     return true;
   } catch {

src/routes/(fullscreen)/gallery/+page.server.ts

@@ -1,7 +0,0 @@
-import { createCaller } from "$trpc/router.server";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async (event) => {
-  const files = await createCaller(event).file.list();
-  return { files };
-};

src/routes/(fullscreen)/gallery/+page.ts

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const files = await trpc.file.list.query();
+  return { files };
+};

src/routes/(fullscreen)/search/service.ts

@@ -20,7 +20,7 @@ export interface SearchResult {
 }
 
 export const requestSearch = async (filter: SearchFilter, masterKey: CryptoKey) => {
-  const { directories: directoriesRaw, files: filesRaw } = await trpc().search.search.query({
+  const { directories: directoriesRaw, files: filesRaw } = await trpc.search.search.query({
     ancestor: filter.ancestorId,
     inFavorites: filter.inFavorites,
     includeCategories: filter.categories

src/routes/(fullscreen)/settings/thumbnail/+page.server.ts

@@ -1,7 +0,0 @@
-import { createCaller } from "$trpc/router.server";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async (event) => {
-  const files = await createCaller(event).file.listWithoutThumbnail();
-  return { files };
-};

src/routes/(fullscreen)/settings/thumbnail/+page.ts

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const files = await trpc.file.listWithoutThumbnail.query();
+  return { files };
+};

src/routes/(main)/category/[[id]]/service.svelte.ts

@@ -30,7 +30,7 @@ export const requestCategoryRename = async (category: SelectedCategory, newName:
   const newNameEncrypted = await encryptString(newName, category.dataKey.key);
 
   try {
-    await trpc().category.rename.mutate({
+    await trpc.category.rename.mutate({
       id: category.id,
       dekVersion: category.dataKey.version,
       name: newNameEncrypted.ciphertext,
@@ -45,7 +45,7 @@ export const requestCategoryRename = async (category: SelectedCategory, newName:
 
 export const requestCategoryDeletion = async (category: SelectedCategory) => {
   try {
-    await trpc().category.delete.mutate({ id: category.id });
+    await trpc.category.delete.mutate({ id: category.id });
     return true;
   } catch {
     // TODO: Error Handling

src/routes/(main)/directory/[[id]]/service.svelte.ts

@@ -36,7 +36,7 @@ export const requestHmacSecretDownload = async (masterKey: CryptoKey) => {
 
   let hmacSecretsWrapped;
   try {
-    hmacSecretsWrapped = await trpc().hsk.list.query();
+    hmacSecretsWrapped = await trpc.hsk.list.query();
   } catch {
     // TODO: Error Handling
     return false;
@@ -64,7 +64,7 @@ export const requestDirectoryCreation = async (
   const nameEncrypted = await encryptString(name, dataKey);
 
   try {
-    await trpc().directory.create.mutate({
+    await trpc.directory.create.mutate({
       parent: parentId,
       mekVersion: masterKey.version,
       dek: await wrapDataKey(dataKey, masterKey.key),
@@ -109,14 +109,14 @@ export const requestEntryRename = async (entry: SelectedEntry, newName: string)
 
   try {
     if (entry.type === "directory") {
-      await trpc().directory.rename.mutate({
+      await trpc.directory.rename.mutate({
         id: entry.id,
         dekVersion: entry.dataKey.version,
         name: newNameEncrypted.ciphertext,
         nameIv: newNameEncrypted.iv,
       });
     } else {
-      await trpc().file.rename.mutate({
+      await trpc.file.rename.mutate({
         id: entry.id,
         dekVersion: entry.dataKey.version,
         name: newNameEncrypted.ciphertext,
@@ -133,7 +133,7 @@ export const requestEntryRename = async (entry: SelectedEntry, newName: string)
 export const requestEntryDeletion = async (entry: SelectedEntry) => {
   try {
     if (entry.type === "directory") {
-      const { deletedFiles } = await trpc().directory.delete.mutate({ id: entry.id });
+      const { deletedFiles } = await trpc.directory.delete.mutate({ id: entry.id });
       await Promise.all(
         deletedFiles.flatMap((fileId) => [
           deleteFileCache(fileId),
@@ -141,7 +141,7 @@ export const requestEntryDeletion = async (entry: SelectedEntry) => {
         ]),
       );
     } else {
-      await trpc().file.delete.mutate({ id: entry.id });
+      await trpc.file.delete.mutate({ id: entry.id });
       await Promise.all([deleteFileCache(entry.id), deleteFileThumbnailCache(entry.id)]);
     }
     return true;
@@ -155,15 +155,15 @@ export const requestFavoriteToggle = async (entry: SelectedEntry) => {
   try {
     if (entry.type === "directory") {
       if (entry.isFavorite) {
-        await trpc().favorites.removeDirectory.mutate({ id: entry.id });
+        await trpc.favorites.removeDirectory.mutate({ id: entry.id });
       } else {
-        await trpc().favorites.addDirectory.mutate({ id: entry.id });
+        await trpc.favorites.addDirectory.mutate({ id: entry.id });
       }
     } else {
       if (entry.isFavorite) {
-        await trpc().favorites.removeFile.mutate({ id: entry.id });
+        await trpc.favorites.removeFile.mutate({ id: entry.id });
       } else {
-        await trpc().favorites.addFile.mutate({ id: entry.id });
+        await trpc.favorites.addFile.mutate({ id: entry.id });
       }
     }
     return true;

src/routes/(main)/favorites/+page.server.ts

@@ -1,7 +0,0 @@
-import { createCaller } from "$trpc/router.server";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async (event) => {
-  const favorites = await createCaller(event).favorites.get();
-  return { favorites };
-};

src/routes/(main)/favorites/+page.ts

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const favorites = await trpc.favorites.get.query();
+  return { favorites };
+};

src/routes/(main)/favorites/service.ts

@@ -52,9 +52,9 @@ export const requestFavoriteEntries = async (
 export const requestRemoveFavorite = async (type: "file" | "directory", id: number) => {
   try {
     if (type === "directory") {
-      await trpc().favorites.removeDirectory.mutate({ id });
+      await trpc.favorites.removeDirectory.mutate({ id });
     } else {
-      await trpc().favorites.removeFile.mutate({ id });
+      await trpc.favorites.removeFile.mutate({ id });
     }
     return true;
   } catch {

src/routes/(main)/menu/+page.server.ts

@@ -1,7 +0,0 @@
-import { createCaller } from "$trpc/router.server";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async (event) => {
-  const { nickname } = await createCaller(event).user.get();
-  return { nickname };
-};

src/routes/(main)/menu/+page.ts

@@ -0,0 +1,8 @@
+import { trpc } from "$trpc/client";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ parent }) => {
+  await parent(); // Wait for the key guard in the root layout
+  const { nickname } = await trpc.user.get.query();
+  return { nickname };
+};

src/routes/+layout.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { goto as svelteGoto } from "$app/navigation";
   import { getDownloadingFiles, getUploadingFiles } from "$lib/modules/file";
-  import { clientKeyStore, masterKeyStore } from "$lib/stores";
   import "../app.css";
 
   let { children } = $props();
@@ -12,23 +9,6 @@
       e.preventDefault();
     }
   };
-
-  onMount(async () => {
-    const goto = async (url: string) => {
-      const whitelist = ["/auth/login", "/key", "/client/pending"];
-      if (!whitelist.some((path) => location.pathname.startsWith(path))) {
-        await svelteGoto(
-          `${url}?redirect=${encodeURIComponent(location.pathname + location.search)}`,
-        );
-      }
-    };
-
-    if (!$clientKeyStore) {
-      await goto("/key/generate");
-    } else if (!$masterKeyStore) {
-      await goto("/client/pending");
-    }
-  });
 </script>
 
 <svelte:window onbeforeunload={protectFileUploadAndDownload} />

src/routes/+layout.ts

@@ -0,0 +1,19 @@
+import { redirect } from "@sveltejs/kit";
+import { get } from "svelte/store";
+import { clientKeyStore, masterKeyStore } from "$lib/stores";
+import type { LayoutLoad } from "./$types";
+
+export const ssr = false;
+
+const KEYLESS_PATHS = ["/auth/login", "/key", "/client/pending"];
+
+export const load: LayoutLoad = ({ url }) => {
+  if (KEYLESS_PATHS.some((path) => url.pathname.startsWith(path))) return;
+
+  const redirectQuery = `?redirect=${encodeURIComponent(url.pathname + url.search)}`;
+  if (!get(clientKeyStore)) {
+    redirect(307, "/key/generate" + redirectQuery);
+  } else if (!get(masterKeyStore)) {
+    redirect(307, "/client/pending" + redirectQuery);
+  }
+};

src/routes/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = () => {
+  redirect(302, "/home");
+};

src/routes/+server.ts

@@ -1,6 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import type { RequestHandler } from "./$types";
-
-export const GET: RequestHandler = () => {
-  redirect(302, "/home");
-};

src/trpc/client.ts

@@ -1,31 +1,47 @@
-import { createTRPCClient, httpBatchLink, TRPCClientError } from "@trpc/client";
+import { createTRPCClient, httpBatchLink, TRPCClientError, type TRPCLink } from "@trpc/client";
+import { observable } from "@trpc/server/observable";
 import superjson from "superjson";
-import { browser } from "$app/environment";
+import { goto } from "$app/navigation";
+import { navigating } from "$app/state";
 import type { AppRouter } from "./router.server";
 
-const createClient = (fetch: typeof globalThis.fetch) =>
-  createTRPCClient<AppRouter>({
-    links: [
-      httpBatchLink({
-        url: "/api/trpc",
-        maxURLLength: 4096,
-        methodOverride: "POST",
-        transformer: superjson,
-        fetch,
+// Procedures that report invalid credentials as UNAUTHORIZED, not an expired session
+const CREDENTIAL_PROCEDURES = new Set(["auth.login", "auth.upgrade"]);
+
+const sessionExpiryLink: TRPCLink<AppRouter> = () => {
+  return ({ op, next }) =>
+    observable((observer) =>
+      next(op).subscribe({
+        next: (value) => observer.next(value),
+        error: (err) => {
+          // Prefer the destination when the request failed during a navigation's load
+          const url = navigating.to?.url ?? location;
+          if (
+            err.data?.code === "UNAUTHORIZED" &&
+            !CREDENTIAL_PROCEDURES.has(op.path) &&
+            url.pathname !== "/auth/login"
+          ) {
+            void goto(`/auth/login?redirect=${encodeURIComponent(url.pathname + url.search)}`);
+          }
+          observer.error(err);
+        },
+        complete: () => observer.complete(),
       }),
-    ],
-  });
-
-let browserClient: ReturnType<typeof createClient>;
-
-export const trpc = (fetch = globalThis.fetch) => {
-  const client = browserClient ?? createClient(fetch);
-  if (browser) {
-    browserClient ??= client;
-  }
-  return client;
+    );
 };
 
+export const trpc = createTRPCClient<AppRouter>({
+  links: [
+    sessionExpiryLink,
+    httpBatchLink({
+      url: "/api/trpc",
+      maxURLLength: 4096,
+      methodOverride: "POST",
+      transformer: superjson,
+    }),
+  ],
+});
+
 export const isTRPCClientError = (e: unknown): e is TRPCClientError<AppRouter> => {
   return e instanceof TRPCClientError;
 };

src/trpc/router.server.ts

@@ -1,6 +1,5 @@
-import type { RequestEvent } from "@sveltejs/kit";
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
-import { createContext, router } from "./init.server";
+import { router } from "./init.server";
 import {
   authRouter,
   categoryRouter,
@@ -29,8 +28,6 @@ export const appRouter = router({
   user: userRouter,
 });
 
-export const createCaller = (event: RequestEvent) => appRouter.createCaller(createContext(event));
-
 export type AppRouter = typeof appRouter;
 export type RouterInputs = inferRouterInputs<AppRouter>;
 export type RouterOutputs = inferRouterOutputs<AppRouter>;