feat: suspense

Author: enpitsuLin

app/components/modules/home/recent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { data } = useFetch('/api/post', {
+const { data } = await useFetch('/api/post', {
   query: {
     limit: '2',
   },

app/pages/(home)/blog/[[page]].vue

@@ -13,7 +13,7 @@ const router = useRouter()
 const POSTS_LIMIT = 5
 const page = computed<number>(() => route.params.page ? Number.parseInt(route.params.page as string) : 1)
 
-const { data: posts } = useFetch('/api/post', {
+const { data: posts } = await useFetch('/api/post', {
   query: {
     limit: POSTS_LIMIT,
     offset: (Math.max(1, page.value) - 1) * POSTS_LIMIT,

app/pages/(home)/blog/tag/[tag]/[[page]].vue

@@ -13,7 +13,7 @@ const router = useRouter()
 const POSTS_LIMIT = 5
 const page = computed<number>(() => route.params.page ? Number.parseInt(route.params.page as string) : 1)
 
-const { data: posts } = useFetch(`/api/post/tag/${route.params.tag}`, {
+const { data: posts } = await useFetch(`/api/post/tag/${route.params.tag}`, {
   query: {
     limit: POSTS_LIMIT,
     offset: (Math.max(1, page.value) - 1) * POSTS_LIMIT,

app/pages/admin/(dashboard)/posts/[[page]].vue

@@ -18,13 +18,14 @@ const route = useRoute('admin-posts-page')
 
 const page = computed<number>(() => route.params.page ? Number.parseInt(route.params.page as string) : 0)
 
-const { data: posts, status, refresh } = useAsyncData(
-  `admin-posts-page-${page.value}`,
-  async () => {
-    const response = await $fetch('/api/post', { query: { limit: 20, offset: (page.value - 1) * 20 } })
-    return response
+const { data: posts, status, refresh } = await useFetch(
+  '/api/post',
+  {
+    query: {
+      limit: 20,
+      offset: computed(() => (page.value - 1) * 20),
+    },
   },
-  { watch: [page] },
 )
 
 const { mutate: deletePost, isLoading: isDeleting } = useMutation({