From 6db4416a1c22a37b6a00bd188702fb49c028d6aa Mon Sep 17 00:00:00 2001
From: Tom Tang <me@qwerzl.me>
Date: Fri, 20 Dec 2024 23:44:50 +0800
Subject: [PATCH] refactor!: use `@tanstack/vue-query` instead of
 `useAsyncData` (#656)

* refactor!: use `vue-query` instead of `useAsyncData`

* revert commenting out sentry

* changeset
---
 .changeset/dull-icons-report.md               |  5 ++
 .npmrc                                        |  1 +
 .../NewClassroomReservation.vue               | 16 +++---
 .../custom/CAS/Record/NewActivityRecord.vue   | 12 ++---
 .../CAS/Record/ViewMyActivityRecords.vue      | 28 ++++------
 components/custom/Index/announcements.vue     |  7 ++-
 components/custom/sidebar.vue                 | 25 ++++-----
 eslint.config.js                              |  2 +
 nuxt.config.ts                                | 15 ++++++
 package.json                                  |  2 +
 pages/cas/rating.vue                          | 10 ++--
 pages/forms/[id].vue                          | 10 ++--
 pages/forms/index.vue                         | 16 +++---
 pages/manage/statuses.vue                     |  8 ++-
 plugins/vue-query.ts                          | 38 +++++++++++++
 pnpm-lock.yaml                                | 54 +++++++++++++++++++
 queries/default.ts                            | 18 +++++++
 server/api/user/all_clubs.get.ts              | 10 ++--
 18 files changed, 189 insertions(+), 88 deletions(-)
 create mode 100644 .changeset/dull-icons-report.md
 create mode 100644 .npmrc
 create mode 100644 plugins/vue-query.ts
 create mode 100644 queries/default.ts

diff --git a/.changeset/dull-icons-report.md b/.changeset/dull-icons-report.md
new file mode 100644
index 00000000..f67d932a
--- /dev/null
+++ b/.changeset/dull-icons-report.md
@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Refactor internal strategy for making API requests
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..c483022c
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
\ No newline at end of file
diff --git a/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue b/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue
index 3bf11a0d..480e0b2f 100644
--- a/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue
+++ b/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue
@@ -15,12 +15,10 @@ import { enums } from '~/components/custom/enum2str'
 
 const { toast } = useToast()
 
-const { data } = await useAsyncData<ClassroomData[]>('classroomStatuses', () => {
-  return $fetch<ClassroomData[]>(`/api/reservation/classroomId`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data, suspense } = useQuery<ClassroomData[]>({
+  queryKey: ['/api/reservation/classroomId'],
 })
+await suspense()
 
 if (!data.value) {
   toast({
@@ -32,12 +30,10 @@ else {
   data.value = data.value.sort((a: any, b: any) => a.name < b.name ? -1 : 1)
 }
 
-const { data: clubs } = await useAsyncData<AllClubs>('allClubs', () => {
-  return $fetch<AllClubs>(`/api/user/all_clubs`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data: clubs, suspense: clubsSuspense } = useQuery<AllClubs>({
+  queryKey: ['/api/user/all_clubs'],
 })
+await clubsSuspense()
 
 if (!clubs.value) {
   toast({
diff --git a/components/custom/CAS/Record/NewActivityRecord.vue b/components/custom/CAS/Record/NewActivityRecord.vue
index a55caaf5..02446c3b 100644
--- a/components/custom/CAS/Record/NewActivityRecord.vue
+++ b/components/custom/CAS/Record/NewActivityRecord.vue
@@ -33,10 +33,6 @@ const { toast } = useToast()
 
 const selectedClub = ref<string>()
 
-definePageMeta({
-  middleware: ['auth'],
-})
-
 const isLoading = ref(false)
 
 const formSchema = toTypedSchema(z.object({
@@ -51,12 +47,10 @@ const formSchema = toTypedSchema(z.object({
   sTime: z.number().min(0).max(5),
 }))
 
-const { data } = await useAsyncData<AllClubs>('allClubsWithMemberships', async () => {
-  return await $fetch<AllClubs>('/api/user/all_clubs?includeMemberships=true', {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data, suspense } = useQuery<AllClubs>({
+  queryKey: ['/api/user/all_clubs'],
 })
+await suspense()
 
 if (!data.value) {
   throw createError({
diff --git a/components/custom/CAS/Record/ViewMyActivityRecords.vue b/components/custom/CAS/Record/ViewMyActivityRecords.vue
index 44d105dc..352a1dad 100644
--- a/components/custom/CAS/Record/ViewMyActivityRecords.vue
+++ b/components/custom/CAS/Record/ViewMyActivityRecords.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
+import type { MyRecords } from '~/types/api/cas/record/my'
+import type { AllClubs } from '~/types/api/user/all_clubs'
 import {
   Card,
   CardContent,
@@ -16,36 +18,26 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Toaster } from '~/components/ui/toast'
-import type { MyRecords } from '~/types/api/cas/record/my'
-import type { AllClubs } from '~/types/api/user/all_clubs'
 import { columns } from './view-activity-records/columns'
 import DataTable from './view-activity-records/DataTable.vue'
+import { useQuery } from '@tanstack/vue-query';
 
 const props = defineProps<{
   refreshWatcher: Ref<boolean>
 }>()
 
-definePageMeta({
-  middleware: ['auth'],
-})
-
 const selectedClub = ref<string>()
 const isLoading = ref(false)
 
-const { data: clubs } = await useAsyncData<AllClubs>('allClubs', () => {
-  return $fetch<AllClubs>(`/api/user/all_clubs`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data: clubs, suspense } = useQuery<AllClubs>({
+  queryKey: ['/api/user/all_clubs'],
 })
+await suspense()
 
-const { data, refresh } = await useAsyncData<MyRecords>('allRequests', () => {
-  return selectedClub.value
-    ? $fetch<MyRecords>(`/api/cas/record/my?club=${selectedClub.value}`, {
-      headers: useRequestHeaders(),
-      method: 'GET',
-    })
-    : Promise.resolve({ total: 0, data: [] })
+const { data, refetch: refresh } = useQuery<MyRecords>({
+  queryKey: [`/api/cas/record/my?club=`, selectedClub],
+  enabled: !!selectedClub.value,
+  placeholderData: { total: 0, data: [] },
 })
 
 async function onRefresh() {
diff --git a/components/custom/Index/announcements.vue b/components/custom/Index/announcements.vue
index b99ab703..e02928e7 100644
--- a/components/custom/Index/announcements.vue
+++ b/components/custom/Index/announcements.vue
@@ -2,11 +2,10 @@
 import type { Announcements } from '~/types/payloadcms/announcements'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 
-const { data } = await useAsyncData<Announcements>('allRequests', () => {
-  return $fetch('/api/cms/api/announcements', {
-    method: 'GET',
-  })
+const { data, suspense } = useQuery<Announcements>({
+  queryKey: ['/api/cms/api/announcements'],
 })
+await suspense()
 </script>
 
 <template>
diff --git a/components/custom/sidebar.vue b/components/custom/sidebar.vue
index 780f1c3a..50e072d3 100644
--- a/components/custom/sidebar.vue
+++ b/components/custom/sidebar.vue
@@ -2,26 +2,21 @@
 import type { AllClubs } from '~/types/api/user/all_clubs'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
-import { useClerk } from 'vue-clerk'
 
-const clerk = useClerk()
 const route = useRoute()
 
 const isPresidentOrVicePresident = ref(false)
 useState('isEnspireLoading').value = true
 
-if (import.meta.client) {
-  if (clerk.user?.publicMetadata.binded) {
-    const clubs = await $fetch<AllClubs>(`/api/user/all_clubs`, {
-      headers: useRequestHeaders(),
-      method: 'GET',
-    })
-    if (clubs) {
-      useState('isEnspireLoading').value = false
-      if (clubs.president.length !== 0 || clubs.vice.length !== 0) {
-        isPresidentOrVicePresident.value = true
-      }
-    }
+const { data: clubs, suspense } = useQuery<AllClubs>({
+  queryKey: ['/api/user/all_clubs'],
+})
+await suspense()
+
+if (clubs.value) {
+  useState('isEnspireLoading').value = false
+  if (clubs.value.president.length !== 0 || clubs.value.vice.length !== 0) {
+    isPresidentOrVicePresident.value = true
   }
 }
 </script>
@@ -64,7 +59,7 @@ if (import.meta.client) {
             </Button>
           </NuxtLink>
           <NuxtLink v-if="[0, 1, 5, 6].includes(new Date().getMonth())" to="/cas/rating">
-            <Button :variant="route.name === 'cas-rating' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
+            <Button :variant="route.name === 'cas-rating' ? 'secondary' : 'ghost'" class="mt-1 w-full justify-start">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:rate-review-outline" />
               期末评价
             </Button>
diff --git a/eslint.config.js b/eslint.config.js
index 119a09b1..99f1632d 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,4 +1,5 @@
 import antfu from '@antfu/eslint-config'
+import pluginQuery from '@tanstack/eslint-plugin-query'
 
 export default antfu({
   typescript: {
@@ -7,6 +8,7 @@ export default antfu({
   vue: true,
   ignores: ['components/ui/'],
   unocss: true,
+  ...pluginQuery.configs['flat/recommended'],
 }, {
   rules: {
     'node/prefer-global/process': 'off',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0d2d8707..e61ac436 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -76,5 +76,20 @@ export default defineNuxtConfig({
     client: true,
   },
 
+  imports: {
+    presets: [
+      {
+        from: '@tanstack/vue-query',
+        imports: ['useQuery'],
+      },
+    ],
+  },
+
+  vite: {
+    optimizeDeps: {
+      exclude: ['vee-validate'],
+    },
+  },
+
   compatibilityDate: '2024-08-31',
 })
diff --git a/package.json b/package.json
index 8def1132..795b7f9f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@nuxt/content": "^2.13.4",
     "@radix-icons/vue": "^1.0.0",
     "@sentry/nuxt": "^8.42.0",
+    "@tanstack/vue-query": "^5.62.8",
     "@tanstack/vue-table": "^8.20.5",
     "@unovis/ts": "^1.4.5",
     "@unovis/vue": "^1.4.5",
@@ -71,6 +72,7 @@
     "@nuxtjs/google-fonts": "^3.2.0",
     "@prisma/client": "^6.0.1",
     "@rollup/plugin-wasm": "^6.2.2",
+    "@tanstack/eslint-plugin-query": "^5.62.1",
     "@types/node-fetch": "^2.6.12",
     "@types/sanitize-html": "^2.13.0",
     "@types/uuid": "^10.0.0",
diff --git a/pages/cas/rating.vue b/pages/cas/rating.vue
index ac2f0f30..ed0f41f3 100644
--- a/pages/cas/rating.vue
+++ b/pages/cas/rating.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { InternalApi } from 'nitropack'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -28,11 +29,8 @@ const formSchema = toTypedSchema(z.object({
   comment: z.string().max(100).optional(),
 }))
 
-const { data } = await useAsyncData('allRequests', () => {
-  return $fetch('/api/club/rating/available', {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data } = await useQuery<InternalApi['/api/club/rating/available']['get']>({
+  queryKey: ['/api/club/rating/available'],
 })
 
 if (!data.value) {
@@ -91,7 +89,7 @@ function onSubmitRating() {
                 <SelectContent>
                   <SelectGroup v-if="data">
                     <SelectItem v-for="club in data" :key="club.id" :value="String(club.id)">
-                      {{ typeof club.name === 'object' && 'zh' in club.name! ? club.name.zh : '' }}
+                      {{ typeof club?.name === 'object' && 'zh' in club.name! ? club.name.zh : '' }}
                     </SelectItem>
                   </SelectGroup>
                 </SelectContent>
diff --git a/pages/forms/[id].vue b/pages/forms/[id].vue
index eb477037..c6bdb08b 100644
--- a/pages/forms/[id].vue
+++ b/pages/forms/[id].vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { Form } from '~/types/data/forms'
 import { useWindowSize } from '@vueuse/core'
 import { useClerk } from 'vue-clerk'
 import { toast } from '~/components/ui/toast'
-import type { Form } from '~/types/data/forms'
 
 const clerk = useClerk()
 
@@ -16,12 +16,10 @@ useHead({
   title: 'Forms | Enspire',
 })
 
-const { data } = await useAsyncData<Form[]>('classroomStatuses', async () => {
-  return await $fetch<Form[]>(`/api/forms/open`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data, suspense } = useQuery<Form[]>({
+  queryKey: ['/api/forms/open'],
 })
+await suspense()
 
 if (!data.value) {
   toast({
diff --git a/pages/forms/index.vue b/pages/forms/index.vue
index 22f239cf..0502dece 100644
--- a/pages/forms/index.vue
+++ b/pages/forms/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Form } from '~/types/data/forms'
 import {
   Card,
   CardDescription,
@@ -8,7 +9,6 @@ import {
 } from '@/components/ui/card'
 import Toaster from '@/components/ui/toast/Toaster.vue'
 import { toast } from '~/components/ui/toast'
-import type { Form } from '~/types/data/forms'
 
 definePageMeta({
   middleware: ['auth'],
@@ -18,12 +18,10 @@ useHead({
   title: 'Forms | Enspire',
 })
 
-const { data } = await useAsyncData<Form[]>('classroomStatuses', async () => {
-  return await $fetch<Form[]>(`/api/forms/open`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data, suspense } = useQuery<Form[]>({
+  queryKey: ['/api/forms/open'],
 })
+suspense()
 
 if (!data.value) {
   toast({
@@ -34,18 +32,18 @@ if (!data.value) {
 </script>
 
 <template>
-  <div class="font-bold flex items-center space-x-2 text-lg">
+  <div class="flex items-center text-lg font-bold space-x-2">
     <Icon name="material-symbols:edit-square-outline" />
     <div>可填写的表单</div>
   </div>
-  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mt-2">
+  <div class="grid grid-cols-1 mt-2 gap-4 md:grid-cols-2 xl:grid-cols-3">
     <NuxtLink v-for="club in data" :key="club.id" :to="`/forms/${club.id}`">
       <Card class="hover:underline">
         <CardHeader>
           <CardTitle>{{ club.title }}</CardTitle>
           <CardDescription>{{ club.description }}</CardDescription>
         </CardHeader>
-        <CardFooter class="text-muted-foreground text-sm flex items-center">
+        <CardFooter class="flex items-center text-sm text-muted-foreground">
           <div>点击填写</div>
           <Icon name="material-symbols:arrow-forward" />
         </CardFooter>
diff --git a/pages/manage/statuses.vue b/pages/manage/statuses.vue
index 4b1931e9..1fc65534 100644
--- a/pages/manage/statuses.vue
+++ b/pages/manage/statuses.vue
@@ -23,12 +23,10 @@ const selectedPeriod = ref(time2period(utc8Time.hour() * 100 + utc8Time.minute()
 
 let dataLoaded = false
 
-const { data } = await useAsyncData<ClassroomData[]>('classroomStatuses', async () => {
-  return await $fetch<ClassroomData[]>(`/api/reservation/classroomId`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data, suspense } = useQuery<ClassroomData[]>({
+  queryKey: ['/api/reservation/classroomId'],
 })
+suspense()
 
 if (data.value) {
   data.value = data.value.sort((a: any, b: any) => a.name < b.name ? -1 : 1)
diff --git a/plugins/vue-query.ts b/plugins/vue-query.ts
new file mode 100644
index 00000000..cecfaaf8
--- /dev/null
+++ b/plugins/vue-query.ts
@@ -0,0 +1,38 @@
+import type {
+  DehydratedState,
+  VueQueryPluginOptions,
+} from '@tanstack/vue-query'
+import {
+  dehydrate,
+  hydrate,
+  QueryClient,
+  VueQueryPlugin,
+} from '@tanstack/vue-query'
+import { defaultQuery } from '~/queries/default'
+
+export default defineNuxtPlugin((nuxt) => {
+  const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+  // Modify your Vue Query global settings here
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 5000,
+        queryFn: defaultQuery,
+      },
+    },
+  })
+  const options: VueQueryPluginOptions = { queryClient }
+
+  nuxt.vueApp.use(VueQueryPlugin, options)
+
+  if (import.meta.server) {
+    nuxt.hooks.hook('app:rendered', () => {
+      vueQueryState.value = dehydrate(queryClient)
+    })
+  }
+
+  if (import.meta.client) {
+    hydrate(queryClient, vueQueryState.value)
+  }
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b75836f3..221e9056 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       '@sentry/nuxt':
         specifier: ^8.42.0
         version: 8.42.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.29.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.29.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.28.0)(magicast@0.3.5)(nuxt@3.14.1592(@netlify/blobs@8.1.0)(@parcel/watcher@2.5.0)(@types/node@22.10.1)(eslint@9.16.0(jiti@2.4.1))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.28.0)(terser@5.36.0)(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.1)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.7.2)))(rollup@4.28.0)(vue@3.5.13(typescript@5.7.2))
+      '@tanstack/vue-query':
+        specifier: ^5.62.8
+        version: 5.62.8(vue@3.5.13(typescript@5.7.2))
       '@tanstack/vue-table':
         specifier: ^8.20.5
         version: 8.20.5(vue@3.5.13(typescript@5.7.2))
@@ -162,6 +165,9 @@ importers:
       '@rollup/plugin-wasm':
         specifier: ^6.2.2
         version: 6.2.2(rollup@4.28.0)
+      '@tanstack/eslint-plugin-query':
+        specifier: ^5.62.1
+        version: 5.62.1(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
       '@types/node-fetch':
         specifier: ^2.6.12
         version: 2.6.12
@@ -2556,6 +2562,18 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@tanstack/eslint-plugin-query@5.62.1':
+    resolution: {integrity: sha512-1886D5U+re1TW0wSH4/kUGG36yIoW5Wkz4twVEzlk3ZWmjF3XkRSWgB+Sc7n+Lyzt8usNV8ZqkZE6DA7IC47fQ==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  '@tanstack/match-sorter-utils@8.19.4':
+    resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/query-core@5.62.8':
+    resolution: {integrity: sha512-4fV31vDsUyvNGrKIOUNPrZztoyL187bThnoQOvAXEVlZbSiuPONpfx53634MKKdvsDir5NyOGm80ShFaoHS/mw==}
+
   '@tanstack/table-core@8.20.5':
     resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
     engines: {node: '>=12'}
@@ -2563,6 +2581,15 @@ packages:
   '@tanstack/virtual-core@3.10.9':
     resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
 
+  '@tanstack/vue-query@5.62.8':
+    resolution: {integrity: sha512-kOKTV6tu5iffq5/hOUpbohfwWH8nGhbCc9wf4UvihlhROILsWLrIPA5fOvdvc5VyozwKokdrubSdEukPZxpwXQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.2
+      vue: ^2.6.0 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@tanstack/vue-table@8.20.5':
     resolution: {integrity: sha512-2xixT3BEgSDw+jOSqPt6ylO/eutDI107t2WdFMVYIZZ45UmTHLySqNriNs0+dMaKR56K5z3t+97P6VuVnI2L+Q==}
     engines: {node: '>=12'}
@@ -6688,6 +6715,9 @@ packages:
   remark-stringify@11.0.0:
     resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
+  remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -10994,10 +11024,32 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tanstack/eslint-plugin-query@5.62.1(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/utils': 8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
+      eslint: 9.16.0(jiti@2.4.1)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@tanstack/match-sorter-utils@8.19.4':
+    dependencies:
+      remove-accents: 0.5.0
+
+  '@tanstack/query-core@5.62.8': {}
+
   '@tanstack/table-core@8.20.5': {}
 
   '@tanstack/virtual-core@3.10.9': {}
 
+  '@tanstack/vue-query@5.62.8(vue@3.5.13(typescript@5.7.2))':
+    dependencies:
+      '@tanstack/match-sorter-utils': 8.19.4
+      '@tanstack/query-core': 5.62.8
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.7.2)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+
   '@tanstack/vue-table@8.20.5(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@tanstack/table-core': 8.20.5
@@ -16261,6 +16313,8 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
+  remove-accents@0.5.0: {}
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
diff --git a/queries/default.ts b/queries/default.ts
new file mode 100644
index 00000000..d59871c0
--- /dev/null
+++ b/queries/default.ts
@@ -0,0 +1,18 @@
+import type { QueryFunctionContext } from '@tanstack/vue-query'
+
+export async function defaultQuery(context: QueryFunctionContext) {
+  let queryUrl = ''
+  for (const key of context.queryKey) {
+    if (typeof key === 'string') {
+      queryUrl += key
+    }
+    else if (isRef(key)) {
+      queryUrl += (key as globalThis.Ref).value
+    }
+  }
+  const data = await $fetch(queryUrl, {
+    method: 'GET',
+    headers: useRequestHeaders(),
+  })
+  return data
+}
diff --git a/server/api/user/all_clubs.get.ts b/server/api/user/all_clubs.get.ts
index c89fde7b..6fad0d84 100644
--- a/server/api/user/all_clubs.get.ts
+++ b/server/api/user/all_clubs.get.ts
@@ -5,7 +5,7 @@ const prisma = new PrismaClient()
 export default eventHandler(async (event) => {
   const { auth } = event.context
 
-  if (!auth.userId) {
+  if ((auth?.userId) == null) {
     setResponseStatus(event, 403)
     return
   }
@@ -16,8 +16,6 @@ export default eventHandler(async (event) => {
     },
   })).tsimsStudentId
 
-  const query = getQuery(event)
-
   return {
     president: await prisma.club.findMany({
       where: {
@@ -26,7 +24,7 @@ export default eventHandler(async (event) => {
       select: {
         id: true,
         name: true,
-        memberships: query.includeMemberships === 'true',
+        memberships: true,
       },
     }),
     vice: await prisma.club.findMany({
@@ -38,7 +36,7 @@ export default eventHandler(async (event) => {
       select: {
         id: true,
         name: true,
-        memberships: query.includeMemberships === 'true',
+        memberships: true,
       },
     }),
     member: await prisma.club.findMany({
@@ -50,7 +48,7 @@ export default eventHandler(async (event) => {
       select: {
         id: true,
         name: true,
-        memberships: query.includeMemberships === 'true',
+        memberships: true,
       },
     }),
   }