Added basic caching for calendar page

pages/i/calendar/[id].vue

@@ -21,8 +21,8 @@ watch(user, (n, _o) => {
 const route = useRoute()
 const id = route.params.id
 
-const { data: calendarData, pending: calPending } = useLazyFetch('/api/calendars/query', { query: { id, full: true } })
+const { data: calendarData, pending: calPending } = useLazyFetch('/api/calendars/query', { key: `calendar-${id}`, query: { id, full: true } })
-const { data: catData, pending: catPending } = useLazyFetch('/api/calendars/categories/query')
+const { data: catData, pending: catPending } = useLazyFetch('/api/calendars/categories/query', { key: `categories-${id}` })
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
@@ -37,20 +37,4 @@ const categories = computed<Category[]>(() => catData?.value?.data as Category[]
   </div>
 
   <Calendar v-else-if="cal && categories" :calendar-data="cal" :categories />
-
-  <!-- <span v-if="calendarData && categories">
-    <Calendar :calendar-data :categories />
-  </span> -->
-  <!-- <Suspense>
-    <Calendar :calendar="calendar?.data" :categories />
-
-    <template #fallback>
-      <div class="h-full w-full grid place-items-center">
-        <div class="grid gap-2 justify-items-center opacity-50">
-          <p>Chargement du calendrier</p>
-          <PhCircleNotch size="50" class="animate-spin"/>
-        </div>
-      </div>
-    </template>
-  </Suspense> -->
 </template>

server/api/calendars/categories/query.get.ts

@@ -1,8 +1,16 @@
 import { serverSupabaseClient } from "#supabase/server";
+import { z } from 'zod'
 import type { Category } from "~/models/Category";
 
+const querySchema = z.object({
+  id: z.number({ coerce: true }).positive().int().optional(),
+})
+
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
+  const query = await getValidatedQuery(event, querySchema.parse)
+
+  setHeader(event, 'Cache-Control', 'public, max-age=3600, s-maxage=7200')
 
   const output = client
     .from('calendar_event_categories')
@@ -11,5 +19,9 @@ export default defineEventHandler(async (event) => {
       name
     `)
 
+  if (query.id) {
+    return output.eq('id', query.id).limit(1).single<Category>()
+  }
+
   return output.returns<Category[]>()
 })

server/api/calendars/query.get.ts

@@ -11,6 +11,8 @@ export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
   const query = await getValidatedQuery(event, querySchema.parse)
 
+  setHeader(event, 'Cache-Control', 'public, max-age=3600, s-maxage=7200')
+
   const partialFields = `
     id,
     name,