configure tanstack query

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@fullcalendar/timegrid": "^6.1.10",
         "@fullcalendar/vue3": "^6.1.10",
         "@tanstack/vue-query": "^5.28.9",
+        "@tanstack/vue-query-devtools": "^5.28.10",
         "@vueuse/core": "^10.7.1",
         "pinia": "^2.1.7",
         "primeflex": "^3.3.1",
@@ -910,6 +911,15 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.28.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.28.10.tgz",
+      "integrity": "sha512-5UN629fKa5/1K/2Pd26gaU7epxRrYiT1gy+V+pW5K6hnf1DeUKK3pANSb2eHKlecjIKIhTwyF7k9XdyE2gREvQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/vue-query": {
       "version": "5.28.9",
       "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.28.9.tgz",
@@ -934,6 +944,22 @@
         }
       }
     },
+    "node_modules/@tanstack/vue-query-devtools": {
+      "version": "5.28.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query-devtools/-/vue-query-devtools-5.28.10.tgz",
+      "integrity": "sha512-KfJssD1dMVw/gAxAFCzUoYXCXm+xszEa83SxMQdLtEbXO0O8PuIN5zIJZBxDTcUHfq89k2OJUKzU9rPiMMoT0w==",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.28.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/vue-query": "^5.28.9",
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
       "version": "0.14.7",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",

frontend/package.json

@@ -19,6 +19,7 @@
     "@fullcalendar/timegrid": "^6.1.10",
     "@fullcalendar/vue3": "^6.1.10",
     "@tanstack/vue-query": "^5.28.9",
+    "@tanstack/vue-query-devtools": "^5.28.10",
     "@vueuse/core": "^10.7.1",
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",

frontend/src/App.vue

@@ -4,6 +4,7 @@ import { RouteRecordName, RouterView } from "vue-router";
 import CalendarPreview from "./components/CalendarPreview.vue";
 import moduleStore from "./store/moduleStore.ts";
 import { provide, ref } from "vue";
+import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
 
 const disabledPages = [
   "room-finder",
@@ -45,6 +46,8 @@ window.addEventListener("resize", updateMobile);
   </RouterView>
   <!-- show CalendarPreview but only on specific router views -->
   <CalendarPreview v-if="isDisabled($route.name)" />
+
+  <VueQueryDevtools />
   <Toast />
 </template>
 

frontend/src/main.ts

@@ -43,7 +43,16 @@ import { VueQueryPlugin } from "@tanstack/vue-query";
 const app = createApp(App);
 const pinia = createPinia();
 
-app.use(VueQueryPlugin);
+app.use(VueQueryPlugin, {
+  queryClientConfig: {
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  },
+});
+
 app.use(PrimeVue);
 app.use(router);
 app.use(ToastService);