refactor!: use @tanstack/vue-query instead of useAsyncData (#656)

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

* revert commenting out sentry

* changeset

Author: qwerzl

.changeset/dull-icons-report.md

@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Refactor internal strategy for making API requests

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

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({

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({

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() {

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>

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>

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',

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',
 })

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",