svelte-query 패키지 추가

eslint.config.js

@@ -1,11 +1,13 @@
-import prettier from "eslint-config-prettier";
-import js from "@eslint/js";
 import { includeIgnoreFile } from "@eslint/compat";
+import js from "@eslint/js";
+import svelteQuery from "@tanstack/eslint-plugin-query";
+import prettier from "eslint-config-prettier";
 import svelte from "eslint-plugin-svelte";
 import tailwind from "eslint-plugin-tailwindcss";
 import globals from "globals";
-import { fileURLToPath } from "node:url";
 import ts from "typescript-eslint";
+import { fileURLToPath } from "url";
+
 const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));
 
 export default ts.config(
@@ -26,11 +28,11 @@ export default ts.config(
   },
   {
     files: ["**/*.svelte"],
-
     languageOptions: {
       parserOptions: {
         parser: ts.parser,
       },
     },
   },
+  ...svelteQuery.configs["flat/recommended"],
 );

package.json

@@ -21,6 +21,8 @@
     "@sveltejs/adapter-node": "^5.2.13",
     "@sveltejs/kit": "^2.22.5",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@tanstack/eslint-plugin-query": "^5.81.2",
+    "@tanstack/svelte-query": "^5.83.0",
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@types/node-schedule": "^2.1.8",

pnpm-lock.yaml

@@ -48,6 +48,12 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.4
         version: 4.0.4(svelte@5.35.6)(vite@5.4.19(@types/node@24.0.13))
+      '@tanstack/eslint-plugin-query':
+        specifier: ^5.81.2
+        version: 5.81.2(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3)
+      '@tanstack/svelte-query':
+        specifier: ^5.83.0
+        version: 5.83.0(svelte@5.35.6)
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
@@ -583,6 +589,19 @@ packages:
       svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
+  '@tanstack/eslint-plugin-query@5.81.2':
+    resolution: {integrity: sha512-h4k6P6fm5VhKP5NkK+0TTVpGGyKQdx6tk7NYYG7J7PkSu7ClpLgBihw7yzK8N3n5zPaF3IMyErxfoNiXWH/3/A==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  '@tanstack/query-core@5.83.0':
+    resolution: {integrity: sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==}
+
+  '@tanstack/svelte-query@5.83.0':
+    resolution: {integrity: sha512-8tNXhuoizntZXnAzo4yqUWgZZnklQkXGUNpb3YreW68DyCBhhrGbErnrODQs3fVc2ABcMvAHIki5uErbdzXH1A==}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0
+
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -2368,6 +2387,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@tanstack/eslint-plugin-query@5.81.2(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.36.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3)
+      eslint: 9.30.1(jiti@2.4.2)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@tanstack/query-core@5.83.0': {}
+
+  '@tanstack/svelte-query@5.83.0(svelte@5.35.6)':
+    dependencies:
+      '@tanstack/query-core': 5.83.0
+      svelte: 5.35.6
+
   '@types/cookie@0.6.0': {}
 
   '@types/estree@1.0.8': {}

src/routes/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { QueryClient, QueryClientProvider } from "@tanstack/svelte-query";
   import { onMount } from "svelte";
   import { get } from "svelte/store";
+  import { browser } from "$app/environment";
   import { goto as svelteGoto } from "$app/navigation";
   import {
     fileUploadStatusStore,
@@ -10,10 +12,19 @@
     clientKeyStore,
     masterKeyStore,
   } from "$lib/stores";
+
   import "../app.css";
 
   let { children } = $props();
 
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser,
+      },
+    },
+  });
+
   const protectFileUploadAndDownload = (e: BeforeUnloadEvent) => {
     if (
       $fileUploadStatusStore.some((status) => isFileUploading(get(status).status)) ||
@@ -43,4 +54,6 @@
 
 <svelte:window onbeforeunload={protectFileUploadAndDownload} />
 
-{@render children()}
+<QueryClientProvider client={queryClient}>
+  {@render children()}
+</QueryClientProvider>