fix: improve composable getter support

Author: johannschopplich

docs/api/use-kql.md

@@ -10,7 +10,7 @@ Query responses are cached.
 function useKql<
   ResT extends KirbyQueryResponse = KirbyQueryResponse,
   ReqT extends KirbyQueryRequest = KirbyQueryRequest,
->(query: (() => ReqT) | ReqT | Ref<ReqT>, opts?: UseKqlOptions<ResT>): AsyncData<ResT, true | Error>
+>(query: MaybeComputedRef<ReqT>, opts?: UseKqlOptions<ResT>): AsyncData<ResT, true | Error>
 
 type UseKqlOptions<T> = Omit<
   UseFetchOptions<T>,

docs/api/use-public-kql.md

@@ -14,7 +14,7 @@ Authorization credentials will be publicly visible. Also, possible CORS issues a
 function usePublicKql<
   ResT extends KirbyQueryResponse = KirbyQueryResponse,
   ReqT extends KirbyQueryRequest = KirbyQueryRequest,
->(query: (() => ReqT) | ReqT | Ref<ReqT>, opts?: UseKqlOptions<ResT>): AsyncData<ResT, true | Error>
+>(query: MaybeComputedRef<ReqT>, opts?: UseKqlOptions<ResT>): AsyncData<ResT, true | Error>
 
 type UseKqlOptions<T> = Omit<
   UseFetchOptions<T>,

src/runtime/composables/useKql.ts

@@ -1,9 +1,9 @@
-import { computed, unref } from 'vue'
+import { computed } from 'vue'
 import { hash } from 'ohash'
-import type { Ref } from 'vue'
 import type { NitroFetchRequest } from 'nitropack'
 import type { AsyncData, UseFetchOptions } from 'nuxt/app'
-import { headersToObject } from '../utils'
+import type { MaybeComputedRef } from '../utils'
+import { headersToObject, resolveUnref } from '../utils'
 import type { KirbyQueryRequest, KirbyQueryResponse } from '#nuxt-kql'
 import { useFetch } from '#imports'
 import { apiRoute } from '#build/nuxt-kql/options'
@@ -28,10 +28,8 @@ export type UseKqlOptions<T> = Omit<
 export function useKql<
   ResT extends KirbyQueryResponse = KirbyQueryResponse,
   ReqT extends KirbyQueryRequest = KirbyQueryRequest,
->(query: (() => ReqT) | ReqT | Ref<ReqT>, opts: UseKqlOptions<ResT> = {}) {
-  const _query = computed(() => typeof query === 'function'
-    ? (query as () => ReqT)()
-    : unref(query))
+>(query: MaybeComputedRef<ReqT>, opts: UseKqlOptions<ResT> = {}) {
+  const _query = computed(() => resolveUnref(query))
 
   if (Object.keys(_query.value).length === 0 || !_query.value.query)
     console.error('[useKql] Empty KQL query')

src/runtime/composables/usePublicKql.ts

@@ -1,10 +1,10 @@
-import { computed, unref } from 'vue'
+import { computed } from 'vue'
 import { hash } from 'ohash'
-import type { Ref } from 'vue'
 import type { NitroFetchRequest } from 'nitropack'
 import type { AsyncData, UseFetchOptions } from 'nuxt/app'
 import type { ModuleOptions } from '../../module'
-import { getAuthHeaders, headersToObject } from '../utils'
+import type { MaybeComputedRef } from '../utils'
+import { getAuthHeaders, headersToObject, resolveUnref } from '../utils'
 import type { KirbyQueryRequest, KirbyQueryResponse } from '#nuxt-kql'
 import { useFetch, useRuntimeConfig } from '#imports'
 
@@ -28,15 +28,13 @@ export type UseKqlOptions<T> = Omit<
 export function usePublicKql<
   ResT extends KirbyQueryResponse = KirbyQueryResponse,
   ReqT extends KirbyQueryRequest = KirbyQueryRequest,
->(query: (() => ReqT) | ReqT | Ref<ReqT>, opts: UseKqlOptions<ResT> = {}) {
+>(query: MaybeComputedRef<ReqT>, opts: UseKqlOptions<ResT> = {}) {
   const { kql } = useRuntimeConfig().public
 
   if (!kql?.clientRequests)
     throw new Error('Fetching queries client-side isn\'t allowed. Enable it by setting "clientRequests" to "true".')
 
-  const _query = computed(() => typeof query === 'function'
-    ? (query as () => ReqT)()
-    : unref(query))
+  const _query = computed(() => resolveUnref(query))
 
   if (Object.keys(_query.value).length === 0 || !_query.value.query)
     console.error('[usePublicKql] Empty KQL query')
@@ -51,7 +49,6 @@ export function usePublicKql<
       ...headersToObject(opts.headers),
       ...getAuthHeaders(kql as ModuleOptions),
       ...(opts.language ? { 'X-Language': opts.language } : {}),
-
     },
   }) as AsyncData<ResT, true | Error>
 }

src/runtime/utils.ts

@@ -1,5 +1,23 @@
+import type { ComputedRef, Ref } from 'vue'
 import type { ModuleOptions } from '../module'
 
+/**
+ * Maybe it's a ref, or a plain value, or a getter function
+ */
+export type MaybeComputedRef<T> = (() => T) | ComputedRef<T> | T | Ref<T>
+
+/**
+ * Normalize value/ref/getter to `ref` or `computed`.
+ */
+export function resolveUnref<T>(r: MaybeComputedRef<T>): T {
+  return typeof r === 'function'
+    ? (r as any)()
+    : unref(r)
+}
+
+/**
+ * Normalize headers to object
+ */
 export function headersToObject(headers: HeadersInit = {}): Record<string, string> {
   // SSR compatibility for `Headers` prototype
   if (typeof Headers !== 'undefined' && headers instanceof Headers)
@@ -11,6 +29,9 @@ export function headersToObject(headers: HeadersInit = {}): Record<string, strin
   return headers as Record<string, string>
 }
 
+/**
+ * Generate authentication headers for KQL fetch requests
+ */
 export function getAuthHeaders({ auth, token, credentials }: ModuleOptions) {
   const headers: Record<string, string> = {}