+
Loading...
diff --git a/frontend/pages/guestbook.vue b/frontend/pages/guestbook.vue
index 4250d43..6b61c69 100644
--- a/frontend/pages/guestbook.vue
+++ b/frontend/pages/guestbook.vue
@@ -2,7 +2,7 @@
import { useGraphQL } from '@/composables/useGraphQL'
import { usePreview } from '@/composables/usePreview'
import { GUESTBOOK_QUERY } from '@/queries/guestbook.mjs'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
import { useHead } from '#imports'
import PostList from '@/components/postList.vue'
import PostForm from '@/components/postForm.vue'
@@ -16,26 +16,32 @@ if (isPreview.value) {
definePageMeta({ ssr: false })
}
-// Data fetching
-const loading = ref(false)
-const error = ref(null)
-const content = ref({})
-
-const fetchGuestbookData = async () => {
- loading.value = true
- error.value = null
- try {
- const result = await graphql.query(GUESTBOOK_QUERY, {}, {
- previewToken: previewToken.value
- })
-
- content.value = result?.guestbookEntries?.[0] || {}
- } catch (err) {
- error.value = new Error(`Failed to fetch guestbook data: ${err.message}`)
- } finally {
- loading.value = false
+// Data fetching using useAsyncData
+const {
+ data: content,
+ error,
+ pending: loading,
+ refresh: refreshContent
+} = await useAsyncData(
+ 'guestbook',
+ async () => {
+ try {
+ const result = await graphql.query(GUESTBOOK_QUERY, {}, {
+ previewToken: previewToken.value
+ })
+
+ return result?.guestbookEntries?.[0] || {}
+ } catch (err) {
+ throw createError({
+ statusCode: 404,
+ message: `Failed to fetch guestbook data: ${err.message}`
+ })
+ }
+ },
+ {
+ watch: [previewToken]
}
-}
+)
// Post list refresh handling
const postListRef = ref(null)
@@ -45,9 +51,11 @@ const handleNewPost = async () => {
}
}
-// Initial data fetch
-onMounted(() => {
- fetchGuestbookData()
+// Watch for preview changes
+watch([isPreview, previewToken], () => {
+ if (isPreview.value && previewToken.value) {
+ refreshContent()
+ }
})
// Page title
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 037df4d..e3cb8c8 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -2,11 +2,10 @@
import { usePreview } from '@/composables/usePreview'
import { useGraphQL } from '@/composables/useGraphQL'
import { HOME_QUERY } from '@/queries/home.mjs'
-import { ref, watch } from 'vue'
+import { useAsyncData } from '#app'
const { isPreview, previewToken, previewTimestamp } = usePreview()
const graphql = useGraphQL()
-const data = ref(null)
// Disable SSR for preview mode
if (isPreview.value) {
@@ -14,26 +13,32 @@ if (isPreview.value) {
}
// Fetch data function
-const fetchData = async () => {
- try {
- const result = await graphql.query(HOME_QUERY, {}, {
- previewToken: previewToken.value
- })
- data.value = result.entry
- } catch (error) {
- console.error('Failed to fetch home data:', error)
+const { data, refresh } = await useAsyncData(
+ 'home',
+ async () => {
+ try {
+ const result = await graphql.query(HOME_QUERY, {}, {
+ previewToken: previewToken.value
+ })
+ return result.entry
+ } catch (error) {
+ console.error('Failed to fetch home data:', error)
+ throw createError({
+ statusCode: 404,
+ message: 'Homepage not found'
+ })
+ }
+ },
+ {
+ watch: [previewToken] // Automatically watch preview token
}
-}
-
-// Initial fetch
-await fetchData()
+)
-// Watch for preview changes and refresh data
watch([isPreview, previewToken], () => {
if (isPreview.value && previewToken.value) {
- fetchData()
+ refresh()
}
-}, { immediate: true })
+})