chore(app): ts errors

Author: benjamincanac

app/pages/[...slug].vue

@@ -10,20 +10,16 @@ const route = useRoute()
 const { toc, seo } = useAppConfig()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const { data } = await useAsyncData(route.path, () => Promise.all([
-  queryCollection('docs').path(route.path).first(),
-  queryCollectionItemSurroundings('docs', route.path, {
-    fields: ['title', 'description']
-  })
-]), {
-  transform: ([page, surround]) => ({ page, surround })
-})
-if (!data.value || !data.value.page) {
+const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
+if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
-const page = computed(() => data.value?.page)
-const surround = computed(() => data.value?.surround)
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['description']
+  })
+})
 
 useSeoMeta({
   title: page.value.seo.title,
@@ -34,14 +30,21 @@ useSeoMeta({
 
 defineOgImageComponent('Docs')
 
-const headline = computed(() => findPageHeadline(navigation.value, page.value))
+const headline = computed(() => findPageHeadline(navigation!.value, page.value))
+
+const links = computed(() => {
+  const links = []
+  if (toc?.bottom?.edit) {
+    links.push({
+      icon: 'i-lucide-external-link',
+      label: 'Edit this page',
+      to: `${toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
+      target: '_blank'
+    })
+  }
 
-const links = computed(() => [toc?.bottom?.edit && {
-  icon: 'i-lucide-external-link',
-  label: 'Edit this page',
-  to: `${toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
-  target: '_blank'
-}, ...(toc?.bottom?.links || [])].filter(Boolean))
+  return [...links, ...(toc?.bottom?.links || [])].filter(Boolean)
+})
 </script>
 
 <template>