From 515ab3c0cc26574ad47c341ad3cc9ef2a042d86f Mon Sep 17 00:00:00 2001
From: samuelreichor <samuelreichor@gmail.com>
Date: Thu, 7 Nov 2024 20:38:20 +0100
Subject: [PATCH] Refactor useCraftQuery composable to use useAsyncData

---
 .changeset/eighty-files-grow.md          |  5 +++++
 playground/app.vue                       | 15 ++++++---------
 playground/nuxt.config.ts                |  2 +-
 src/runtime/composables/useCraftQuery.ts | 21 +++++++--------------
 4 files changed, 19 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/eighty-files-grow.md

diff --git a/.changeset/eighty-files-grow.md b/.changeset/eighty-files-grow.md
new file mode 100644
index 0000000..5158ba4
--- /dev/null
+++ b/.changeset/eighty-files-grow.md
@@ -0,0 +1,5 @@
+---
+"nuxt-craftcms": patch
+---
+
+Refactor useCraftQuery composable to use useAsyncData for more control
diff --git a/playground/app.vue b/playground/app.vue
index d2309aa..c19911d 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useCraftQuery } from '../src/runtime/composables/useCraftQuery'
 
 const data = ref()
 const news = ref()
 const entryQuery = useCraftQuery('entries')
 
-// Fetch in setup function
-onMounted(async () => {
-  const { data: initialData, error: initialError } = await entryQuery.slug('home').one()
+const { data: initialData, error: initialError } = await entryQuery.slug('home').one()
 
-  if (initialError.value) {
-    console.error(initialError.value)
-  }
+if (initialError.value) {
+  console.error(initialError.value)
+}
 
-  data.value = initialData.value
-})
+console.log(initialData.value)
 
 // Fetch on clientside
 async function loadNews() {
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 4586079..68fc71e 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -2,7 +2,7 @@ export default defineNuxtConfig({
   modules: ['../src/module'],
 
   craftcms: {
-    baseUrl: 'https://backend-craftcms.ddev.site',
+    baseUrl: 'https://backend-craftcms.ddev.site:8443',
   },
 
   devtools: { enabled: true },
diff --git a/src/runtime/composables/useCraftQuery.ts b/src/runtime/composables/useCraftQuery.ts
index c938512..9076c5c 100644
--- a/src/runtime/composables/useCraftQuery.ts
+++ b/src/runtime/composables/useCraftQuery.ts
@@ -1,16 +1,9 @@
-import type { Ref } from 'vue'
 import type { ElementType } from 'js-craftcms-api'
 import { useCraftUrlBuilder } from 'vue-craftcms'
-import { useFetch } from '#imports'
+import { useAsyncData } from '#imports'
 
-interface FetchResult<T = unknown> {
-  data: Ref<T | null>
-  error: Ref<unknown | null>
-}
-
-async function fetchFn(url: string): Promise<FetchResult> {
-  const { data, error } = await useFetch(url)
-  return { data, error }
+function fetchFn(url: string) {
+  return useAsyncData(`craftcms:${url}`, () => $fetch(url))
 }
 
 export function useCraftQuery<T extends ElementType>(elementType: T) {
@@ -19,14 +12,14 @@ export function useCraftQuery<T extends ElementType>(elementType: T) {
   return {
     ...queryBuilder,
 
-    async one() {
+    one() {
       const url = queryBuilder.buildUrl('one')
-      return await fetchFn(url)
+      return fetchFn(url)
     },
 
-    async all() {
+    all() {
       const url = queryBuilder.buildUrl('all')
-      return await fetchFn(url)
+      return fetchFn(url)
     },
   }
 }