$kql
Returns raw 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 $kql<T extends KirbyQueryResponse<any, boolean> = KirbyQueryResponse>(
query: KirbyQueryRequest,
opts: KqlOptions = {}
): Promise<T>
type KqlOptions = Pick<
NitroFetchOptions<string>,
| 'onRequest'
| 'onRequestError'
| 'onResponse'
| 'onResponseError'
| 'headers'
| 'retry'
| 'retryDelay'
| 'timeout'
> & {
/**
* 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
*/
cache?: boolean
}
function $kql<T extends KirbyQueryResponse<any, boolean> = KirbyQueryResponse>(
query: KirbyQueryRequest,
opts: KqlOptions = {}
): Promise<T>
type KqlOptions = Pick<
NitroFetchOptions<string>,
| 'onRequest'
| 'onRequestError'
| 'onResponse'
| 'onResponseError'
| 'headers'
| 'retry'
| 'retryDelay'
| 'timeout'
> & {
/**
* 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
*/
cache?: boolean
}
Example
vue
<script setup lang="ts">
const data = await $kql(
{
query: 'site',
select: ['title', 'children']
},
{
async onRequest({ request }) {
console.log(request)
},
async onResponse({ response }) {
console.log(response)
},
async onRequestError({ error }) {
console.log(error)
},
async onResponseError({ error }) {
console.log(error)
}
}
)
</script>
<template>
<div>
<h1>{{ data?.result?.title }}</h1>
</div>
</template>
<script setup lang="ts">
const data = await $kql(
{
query: 'site',
select: ['title', 'children']
},
{
async onRequest({ request }) {
console.log(request)
},
async onResponse({ response }) {
console.log(response)
},
async onRequestError({ error }) {
console.log(error)
},
async onResponseError({ error }) {
console.log(error)
}
}
)
</script>
<template>
<div>
<h1>{{ data?.result?.title }}</h1>
</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 $kql(
query,
{ client: true }
)
const data = await $kql(
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
}
})