feat: watch language ref or getter by default

Author: johannschopplich

docs/api/use-kql.md

@@ -29,7 +29,7 @@ type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
   /**
    * Language code to fetch data for in multi-language Kirby setups.
    */
-  language?: string
+  language?: MaybeRefOrGetter<string>
   /**
    * Skip the Nuxt server proxy and fetch directly from the API.
    * Requires `client` to be enabled in the module options as well.
@@ -41,6 +41,12 @@ type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
    * @default true
    */
   cache?: boolean
+  /**
+   * Watch an array of reactive sources and auto-refresh the fetch result when they change.
+   * Query and language are watched by default. You can completely ignore reactive sources by using `watch: false`.
+   * @default undefined
+   */
+  watch?: (WatchSource<unknown> | object)[] | false
 }
 ```
 

package.json

@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.7.3",
-    "@vueuse/core": "^10.4.1",
+    "@vueuse/core": "^10",
     "defu": "^6.1.2",
     "kirby-types": "^0.6.2",
     "ofetch": "^1.3.3",

pnpm-lock.yaml

@@ -3,13 +3,14 @@ import { joinURL } from 'ufo'
 import { hash } from 'ohash'
 import type { FetchError } from 'ofetch'
 import type { NitroFetchOptions } from 'nitropack'
+import type { WatchSource } from 'vue'
 import type { AsyncData, AsyncDataOptions } from 'nuxt/app'
 import { toValue } from '@vueuse/core'
 import type { MaybeRefOrGetter } from '@vueuse/core'
 import { DEFAULT_CLIENT_ERROR, getAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useAsyncData, useRuntimeConfig } from '#imports'
 
-type UseKirbyDataOptions<T> = AsyncDataOptions<T> & Pick<
+type UseKirbyDataOptions<T> = Omit<AsyncDataOptions<T>, 'watch'> & Pick<
   NitroFetchOptions<string>,
   | 'onRequest'
   | 'onRequestError'
@@ -26,7 +27,7 @@ type UseKirbyDataOptions<T> = AsyncDataOptions<T> & Pick<
   /**
    * Language code to fetch data for in multi-language Kirby setups.
    */
-  language?: string
+  language?: MaybeRefOrGetter<string>
   /**
    * Skip the Nuxt server proxy and fetch directly from the API.
    * Requires `client` to be enabled in the module options as well.
@@ -38,6 +39,12 @@ type UseKirbyDataOptions<T> = AsyncDataOptions<T> & Pick<
    * @default true
    */
   cache?: boolean
+  /**
+   * Watch an array of reactive sources and auto-refresh the fetch result when they change.
+   * Path and language are watched by default. You can completely ignore reactive sources by using `watch: false`.
+   * @default undefined
+   */
+  watch?: (WatchSource<unknown> | object)[] | false
 }
 
 export function useKirbyData<T = any>(
@@ -65,27 +72,28 @@ export function useKirbyData<T = any>(
   const { kql } = useRuntimeConfig().public
   const _path = computed(() => {
     const value = toValue(path).replace(/^\//, '')
-    return language ? joinURL(language, value) : value
+    return language ? joinURL(toValue(language), value) : value
   })
+  const _language = computed(() => toValue(language))
 
-  if (!_path.value || (language && !_path.value.replace(new RegExp(`^${language}/`), '')))
+  if (!_path.value || (_language.value && !_path.value.replace(new RegExp(`^${_language.value}/`), '')))
     console.warn('[useKirbyData] Empty Kirby path')
 
   if (client && !kql.client)
     throw new Error(DEFAULT_CLIENT_ERROR)
 
-  const baseHeaders = headersToObject(headers)
-
   const asyncDataOptions: AsyncDataOptions<T> = {
     server,
     lazy,
     default: defaultFn,
     transform,
     pick,
-    watch: [
-      _path,
-      ...(watch || []),
-    ],
+    watch: watch === false
+      ? []
+      : [
+          _path,
+          ...(watch || []),
+        ],
     immediate,
   }
 
@@ -94,7 +102,7 @@ export function useKirbyData<T = any>(
     body: {
       path: _path,
       query,
-      headers: Object.keys(baseHeaders).length ? baseHeaders : undefined,
+      headers: headersToObject(headers),
       method,
       body,
       cache,
@@ -105,7 +113,7 @@ export function useKirbyData<T = any>(
     baseURL: kql.url,
     query,
     headers: {
-      ...baseHeaders,
+      ...headersToObject(headers),
       ...getAuthHeader(kql),
     },
     method,
@@ -117,8 +125,6 @@ export function useKirbyData<T = any>(
     _path.value,
     query,
     method,
-    body,
-    language,
   ])}`)
 
   return useAsyncData<T, FetchError>(

src/runtime/composables/useKirbyData.ts

@@ -2,14 +2,15 @@ import { computed, reactive } from 'vue'
 import { hash } from 'ohash'
 import type { FetchError } from 'ofetch'
 import type { NitroFetchOptions } from 'nitropack'
+import type { WatchSource } from 'vue'
 import type { AsyncData, AsyncDataOptions } from 'nuxt/app'
 import type { KirbyQueryRequest, KirbyQueryResponse } from 'kirby-types'
 import { toValue } from '@vueuse/core'
 import type { MaybeRefOrGetter } from '@vueuse/core'
 import { DEFAULT_CLIENT_ERROR, getAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useAsyncData, useRuntimeConfig } from '#imports'
 
-export type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
+export type UseKqlOptions<T> = Omit<AsyncDataOptions<T>, 'watch'> & Pick<
   NitroFetchOptions<string>,
   | 'onRequest'
   | 'onRequestError'
@@ -23,7 +24,7 @@ export type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
   /**
    * Language code to fetch data for in multi-language Kirby setups.
    */
-  language?: string
+  language?: MaybeRefOrGetter<string>
   /**
    * Skip the Nuxt server proxy and fetch directly from the API.
    * Requires `client` to be enabled in the module options as well.
@@ -35,6 +36,12 @@ export type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
    * @default true
    */
   cache?: boolean
+  /**
+   * Watch an array of reactive sources and auto-refresh the fetch result when they change.
+   * Query and language are watched by default. You can completely ignore reactive sources by using `watch: false`.
+   * @default undefined
+   */
+  watch?: (WatchSource<unknown> | object)[] | false
 }
 
 export function useKql<
@@ -58,6 +65,7 @@ export function useKql<
 
   const { kql } = useRuntimeConfig().public
   const _query = computed(() => toValue(query))
+  const _language = computed(() => toValue(language))
 
   if (Object.keys(_query.value).length === 0 || !_query.value.query)
     console.error('[useKql] Empty KQL query')
@@ -71,39 +79,42 @@ export function useKql<
     default: defaultFn,
     transform,
     pick,
-    watch: [
-      _query,
-      ...(watch || []),
-    ],
+    watch: watch === false
+      ? []
+      : [
+          _query,
+          _language,
+          ...(watch || []),
+        ],
     immediate,
   }
 
-  const baseHeaders = {
-    ...headersToObject(headers),
-    ...(language && { 'X-Language': language }),
-  }
-
   const _serverFetchOptions = reactive<NitroFetchOptions<string>>({
     method: 'POST',
     body: {
       query: _query,
       cache,
-      headers: Object.keys(baseHeaders).length ? baseHeaders : undefined,
+      headers: computed(() => ({
+        ...headersToObject(headers),
+        ...(_language.value && { 'X-Language': _language.value }),
+      })),
     },
   })
 
   const _clientFetchOptions = reactive<NitroFetchOptions<string>>({
     baseURL: kql.url,
     method: 'POST',
     body: _query,
-    headers: {
-      ...baseHeaders,
+    // @ts-expect-error: Reactive value
+    headers: computed(() => ({
+      ...headersToObject(headers),
+      ...(_language.value && { 'X-Language': _language.value }),
       ...getAuthHeader(kql),
-    },
+    })),
   })
 
   let controller: AbortController | undefined
-  const key = computed(() => `$kql${hash([_query.value, language])}`)
+  const key = computed(() => `$kql${hash([_query.value, _language.value])}`)
 
   return useAsyncData<ResT, FetchError>(
     key.value,

src/runtime/composables/useKql.ts

@@ -7,10 +7,7 @@ export function getProxyPath(key: string) {
 }
 
 export function headersToObject(headers: HeadersInit = {}): Record<string, string> {
-  if (headers instanceof Headers)
-    return Object.fromEntries([...headers.entries()])
-
-  if (Array.isArray(headers))
+  if (headers instanceof Headers || Array.isArray(headers))
     return Object.fromEntries(headers)
 
   return headers