feat!: client: true disables server proxy for all composables

Author: johannschopplich

docs/api/kql.md

@@ -27,12 +27,6 @@ type KqlOptions = Pick<
    * Language code to fetch data for in multi-language Kirby setups.
    */
   language?: string
-  /**
-   * Skip the Nuxt server proxy and fetch directly from the API.
-   * Requires `client` to be enabled in the module options as well.
-   * @default false
-   */
-  client?: boolean
   /**
    * Cache the response between function calls for the same query.
    * @default true
@@ -80,16 +74,7 @@ const data = await $kql(
 Authorization credentials will be publicly visible. Also, possible CORS issues ahead if the backend is not configured properly.
 :::
 
-To fetch data directly from your Kirby instance, without the Nuxt proxy, set the option `client` to `true`:
-
-```ts{3}
-const data = await $kql(
-  query,
-  { client: true }
-)
-```
-
-This requires the `client` option to be `true` in your `nuxt-kql` module configuration:
+To fetch data directly from your Kirby instance without the Nuxt proxy, set the module option `client` to `true`:
 
 ```ts{6}
 // `nuxt.config.ts`
@@ -101,3 +86,9 @@ export default defineNuxtConfig({
   }
 })
 ```
+
+Now, every `$kql` call will be directly use the Kirby instance by sending requests from the client:
+
+```ts{3}
+const data = await $kql(query)
+```

docs/api/use-kql.md

@@ -30,12 +30,6 @@ type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
    * Language code to fetch data for in multi-language Kirby setups.
    */
   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.
-   * @default false
-   */
-  client?: boolean
   /**
    * Cache the response between function calls for the same query.
    * @default true
@@ -87,16 +81,7 @@ const { data, pending, error, refresh } = await useKql({
 Authorization credentials will be publicly visible. Also, possible CORS issues ahead if the backend is not configured properly.
 :::
 
-To fetch data directly from your Kirby instance, without the Nuxt proxy, set the option `client` to `true`:
-
-```ts{3}
-const { data } = await useKql(
-  query,
-  { client: true }
-)
-```
-
-This requires the `client` option to be `true` in your `nuxt-kql` module configuration:
+To fetch data directly from your Kirby instance without the Nuxt proxy, set the module option `client` to `true`:
 
 ```ts{6}
 // `nuxt.config.ts`
@@ -108,3 +93,9 @@ export default defineNuxtConfig({
   }
 })
 ```
+
+Now, every `useKql` call will be directly use the Kirby instance by sending requests from the client:
+
+```ts{3}
+const { data } = await useKql(query)
+```

docs/config/caching.md

@@ -12,7 +12,7 @@ If you want to disable caching, you can do so by setting the `cache` option to `
 const { data } = await useKql(
   query,
   {
-    // Disable caching
+    // Disable in-memory caching
     cache: false
   }
 )

docs/config/index.md

@@ -64,12 +64,13 @@ interface ModuleOptions {
   }
 
   /**
-   * Enable client-side requests besides server-side ones
+   * Send client-side requests instead of using the server-side proxy
    *
    * @remarks
    * By default, KQL data is fetched safely with a server-side proxy.
-   * If enabled, query requests are allowed to be sent directly from the client.
+   * If enabled, query requests will be be sent directly from the client.
    * Note: This means your token or user credentials will be publicly visible.
+   * If Nuxt SSR is disabled, this option is enabled by default.
    *
    * @default false
    */

docs/guide/what-is-nuxt-kql.md

@@ -1,6 +1,6 @@
 # What is nuxt-kql?
 
-`nuxt-kql` is a lightweight module for [Nuxt](https://nuxt.com) to reliably fetch data from your Kirby instance using the **Kirby Query Language API**. It works on the server and client-side (the latter has to be enabled explicitly).
+`nuxt-kql` is a lightweight module for [Nuxt](https://nuxt.com) to reliably fetch data from your Kirby instance using the **Kirby Query Language API**, while keeping your authentication credentials safe. It works on the server and the client.
 
 ## Motivation
 

playground/nuxt.config.ts

@@ -5,8 +5,8 @@ export default defineNuxtConfig({
     // Enable token-based authentication
     auth: 'bearer',
 
-    // Enable client-side query requests with `useKql(query, { client: true })`
-    client: true,
+    // Send client-side query requests to Kirby instead of the KQL proxy
+    // client: true,
 
     // Prefetch queries at build-time
     prefetch: {

playground/pages/client-query.vue

@@ -10,7 +10,7 @@ const query = ref<KirbyQueryRequest>({
   },
 })
 
-const { data } = await useKql(query, { client: true })
+const { data } = await useKql(query)
 
 function updateQuery() {
   query.value = {

src/runtime/composables/$kirby.ts

@@ -2,7 +2,7 @@ import { joinURL } from 'ufo'
 import { hash } from 'ohash'
 import type { NitroFetchOptions } from 'nitropack'
 import type { ServerFetchOptions } from '../types'
-import { DEFAULT_CLIENT_ERROR, getAuthHeader, getProxyPath, headersToObject } from '../utils'
+import { getAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useNuxtApp, useRuntimeConfig } from '#imports'
 
 export type KirbyFetchOptions = Pick<
@@ -23,12 +23,6 @@ export type KirbyFetchOptions = Pick<
    * Language code to fetch data for in multi-language Kirby setups.
    */
   language?: string
-  /**
-   * Skip the Nuxt server proxy and fetch directly from the API.
-   * Requires `client` to be enabled in the module options as well.
-   * @default false
-   */
-  client?: boolean
   /**
    * Cache the response between function calls for the same path.
    * @default true
@@ -48,7 +42,6 @@ export function $kirby<T = any>(
     method,
     body,
     language,
-    client = false,
     cache = true,
     ...fetchOptions
   } = opts
@@ -65,9 +58,6 @@ export function $kirby<T = any>(
     language,
   ])}`
 
-  if (client && !kql.client)
-    throw new Error(DEFAULT_CLIENT_ERROR)
-
   if ((nuxt.isHydrating || cache) && key in nuxt.payload.data)
     return Promise.resolve(nuxt.payload.data[key])
 
@@ -99,9 +89,9 @@ export function $kirby<T = any>(
     body,
   }
 
-  const request = globalThis.$fetch(client ? path : getProxyPath(key), {
+  const request = globalThis.$fetch(kql.client ? path : getProxyPath(key), {
     ...fetchOptions,
-    ...(client ? _clientFetchOptions : _serverFetchOptions),
+    ...(kql.client ? _clientFetchOptions : _serverFetchOptions),
   })
     .then((response) => {
       if (process.server || cache)

src/runtime/composables/$kql.ts

@@ -2,7 +2,7 @@ import { hash } from 'ohash'
 import type { NitroFetchOptions } from 'nitropack'
 import type { KirbyQueryRequest, KirbyQueryResponse } from 'kirby-types'
 import type { ServerFetchOptions } from '../types'
-import { DEFAULT_CLIENT_ERROR, getAuthHeader, getProxyPath, headersToObject } from '../utils'
+import { getAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useNuxtApp, useRuntimeConfig } from '#imports'
 
 export type KqlOptions = Pick<
@@ -20,12 +20,6 @@ export type KqlOptions = Pick<
    * Language code to fetch data for in multi-language Kirby setups.
    */
   language?: string
-  /**
-   * Skip the Nuxt server proxy and fetch directly from the API.
-   * Requires `client` to be enabled in the module options as well.
-   * @default false
-   */
-  client?: boolean
   /**
    * Cache the response between function calls for the same query.
    * @default true
@@ -39,13 +33,10 @@ export function $kql<T extends KirbyQueryResponse<any, boolean> = KirbyQueryResp
 ): Promise<T> {
   const nuxt = useNuxtApp()
   const promiseMap = (nuxt._promiseMap = nuxt._promiseMap || new Map()) as Map<string, Promise<T>>
-  const { headers, language, client = false, cache = true, ...fetchOptions } = opts
+  const { headers, language, cache = true, ...fetchOptions } = opts
   const { kql } = useRuntimeConfig().public
   const key = `$kql${hash([query, language])}`
 
-  if (client && !kql.client)
-    throw new Error(DEFAULT_CLIENT_ERROR)
-
   if ((nuxt.isHydrating || cache) && key in nuxt.payload.data)
     return Promise.resolve(nuxt.payload.data[key])
 
@@ -76,9 +67,9 @@ export function $kql<T extends KirbyQueryResponse<any, boolean> = KirbyQueryResp
     },
   }
 
-  const request = globalThis.$fetch(client ? kql.prefix : getProxyPath(key), {
+  const request = globalThis.$fetch(kql.client ? kql.prefix : getProxyPath(key), {
     ...fetchOptions,
-    ...(client ? _clientFetchOptions : _serverFetchOptions),
+    ...(kql.client ? _clientFetchOptions : _serverFetchOptions),
   })
     .then((response) => {
       if (process.server || cache)

src/runtime/composables/useKirbyData.ts

@@ -7,7 +7,7 @@ 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 { getAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useAsyncData, useRuntimeConfig } from '#imports'
 
 type UseKirbyDataOptions<T> = Omit<AsyncDataOptions<T>, 'watch'> & Pick<
@@ -28,12 +28,6 @@ type UseKirbyDataOptions<T> = Omit<AsyncDataOptions<T>, 'watch'> & Pick<
    * Language code to fetch data for in multi-language Kirby setups.
    */
   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.
-   * @default false
-   */
-  client?: boolean
   /**
    * Cache the response between function calls for the same path.
    * @default true
@@ -64,7 +58,6 @@ export function useKirbyData<T = any>(
     method,
     body,
     language,
-    client = false,
     cache = true,
     ...fetchOptions
   } = opts
@@ -84,9 +77,6 @@ export function useKirbyData<T = any>(
   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 asyncDataOptions: AsyncDataOptions<T> = {
     server,
     lazy,
@@ -119,7 +109,7 @@ export function useKirbyData<T = any>(
       try {
         let result: T | undefined
 
-        if (client) {
+        if (kql.client) {
           result = (await globalThis.$fetch<T>(_path.value, {
             ...fetchOptions,
             signal: controller.signal,