Refactor useCraftQuery composable to use useAsyncData

.changeset/eighty-files-grow.md

@@ -0,0 +1,5 @@
+---
+"nuxt-craftcms": patch
+---
+
+Refactor useCraftQuery composable to use useAsyncData for more control

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

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

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