nuxt-kqluseKql
Returns KQL query data. Uses an internal server route to proxy requests.
Query responses are cached by default between function calls for the same query based on a calculated hash.
Type Declarations
ts
function useKql<
ResT extends KirbyQueryResponse<any, boolean> = KirbyQueryResponse,
ReqT extends KirbyQueryRequest = KirbyQueryRequest
>(
query: MaybeRefOrGetter<ReqT>,
opts?: UseKqlOptions<ResT>
): AsyncData<ResT, FetchError>
type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
NitroFetchOptions<string>,
| 'onRequest'
| 'onRequestError'
| 'onResponse'
| 'onResponseError'
| 'headers'
| 'retry'
| 'retryDelay'
| 'timeout'
> & {
/**
* 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
*/
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
}function useKql<
ResT extends KirbyQueryResponse<any, boolean> = KirbyQueryResponse,
ReqT extends KirbyQueryRequest = KirbyQueryRequest
>(
query: MaybeRefOrGetter<ReqT>,
opts?: UseKqlOptions<ResT>
): AsyncData<ResT, FetchError>
type UseKqlOptions<T> = AsyncDataOptions<T> & Pick<
NitroFetchOptions<string>,
| 'onRequest'
| 'onRequestError'
| 'onResponse'
| 'onResponseError'
| 'headers'
| 'retry'
| 'retryDelay'
| 'timeout'
> & {
/**
* 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
*/
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
}useKql infers all of Nuxt's useAsyncData options.
Return Values
- data: the result of the KQL query
- pending: a boolean indicating whether the data is still being fetched
- refresh: a function that can be used to refresh the data returned by the handler function
- error: an error object if the data fetching failed
By default, Nuxt waits until a refresh is finished before it can be executed again. Passing true as parameter skips that wait.
Example
vue
<script setup lang="ts">
const { data, pending, error, refresh } = await useKql({
query: 'site',
select: ['title', 'children']
})
</script>
<template>
<div>
<h1>{{ data?.result?.title }}</h1>
<button @click="refresh()">
Refresh
</button>
</div>
</template><script setup lang="ts">
const { data, pending, error, refresh } = await useKql({
query: 'site',
select: ['title', 'children']
})
</script>
<template>
<div>
<h1>{{ data?.result?.title }}</h1>
<button @click="refresh()">
Refresh
</button>
</div>
</template>Allow Client Requests
WARNING
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
const { data } = await useKql(
query,
{ client: true }
)const { data } = await useKql(
query,
{ client: true }
)This requires the client option to be true in your nuxt-kql module configuration:
ts
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-kql'],
kql: {
client: true
}
})// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-kql'],
kql: {
client: true
}
})