added own caching for ical feed

frontend/src/components/CalendarViewer.vue

@@ -32,7 +32,7 @@ import iCalenderPlugin from "@fullcalendar/icalendar";
 import router from "@/router";
 import { formatYearMonthDay } from "@/helpers/dates.ts";
 import { useI18n } from "vue-i18n";
-import { useQuery } from "@tanstack/vue-query";
+import { useQuery, useQueryClient } from "@tanstack/vue-query";
 import tokenStore from "@/store/tokenStore.ts";
 import { parseICalData } from "@/helpers/ical.ts";
 import { fetchICalendarEvents } from "@/api/loadICal.ts";
@@ -71,20 +71,39 @@ const toggle = (info: EventClickArg) => {
   }
 };
 
-const selectedToken = computed(() => props.token);
+
+const selectedToken = computed(() => {
+  return props.token;
+});
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const date: Ref<Date> = ref(new Date());
 
-const { data: calendar } = useQuery({
+const { data: calendar} = useQuery({
   queryKey: ["userCalendar", selectedToken],
   queryFn: () => fetchICalendarEvents(selectedToken.value),
   select: (data) => {
     return data;
   },
+  staleTime: 12 * 60 * 60 * 1000, // 12 hours
+  refetchOnWindowFocus: "always",
+  refetchOnReconnect: "always",
   networkMode: "offlineFirst",
-  enabled: () => tokenStore().token !== "",
-  staleTime: 5000000, // 500 seconds
+  enabled: () => tokenStore().token !== ""
+});
+
+const queryClient = useQueryClient();
+
+const invalidateAndRefetchCalendar = () => {
+  console.debug("invalidateAndRefetchCalendar", selectedToken);
+  const queryKey = ["userCalendar", selectedToken];
+  queryClient.invalidateQueries({queryKey: queryKey}).then(() => {
+    queryClient.refetchQueries({queryKey: queryKey});
+  });
+};
+
+defineExpose({
+  invalidateAndRefetchCalendar
 });
 
 const events = computed(() => {