Send KQL query for nuxt.config.ts?

[SavioMenifer]

I'm trying to get a list of draft pages from Kirby during the static generation stage of my site, so that I can pass it to nitroConfig.prerender.routes. I'm doing this so that the draft pages, which are not otherwise linked from the main site, are also generated when building.

I need to be able to fetch the draft pages with nuxt-kql directly from within nuxt.config.ts. However, importing useKql like this does not work:

import { useKql } from "nuxt-kql";

This gives me the error

(0 , _nuxtKql.useKql) is not a function

How can I import and use useKql in this case?

[johannschopplich]

Great question!

tl;dr: You can't. useKql is only available during a component's lifecycle; during the setup() phase of a component. Just like Nuxt's useFetch, useNuxtApp and other composables. Also, useKql needs the Nuxt instance to retrieve values like the Kirby backend URL from the runtime config.

However, you can create a custom module that fetches a query and adds routes to Nitro prerender queue.

Save the following module as modules/prerender.ts. Nuxt will auto-import the module. I assume you use the Kirby Headless plugin with the bearer-token authentication? If not, you have to adapt the authentication method for the $kirby fetch instance.

import { ofetch } from 'ofetch'
import { defineNuxtModule, useLogger } from 'nuxt/kit'
import type { KirbyQueryResponse, KirbyQuerySchema } from '#nuxt-kql'

export default defineNuxtModule({
  meta: {
    name: 'prerender:drafts',
  },
  async setup(options, nuxt) {
    const logger = useLogger('prerender')
    const $kirby = ofetch.create({
      baseURL: nuxt.options.kql?.url || process.env.KIRBY_BASE_URL,
      method: 'POST',
      headers: {
        Authorization: `Bearer ${nuxt.options.kql?.token || process.env.KIRBY_API_TOKEN}`,
      },
    })

    const query: KirbyQuerySchema = {
      query: 'site.children',
      select: ['id'],
    }

    const response = await $kirby<KirbyQueryResponse>('api/kql', {
      body: query,
    })

    if (!response.result) return

    nuxt.hook('nitro:config', (config) => {
      config.prerender ||= {}
      config.prerender.routes ||= []
      config.prerender.routes.push(...response.result.map((page: any) => page.id))
    })

    logger.success(
      `Added ${response.result.length} draft pages to prerender queue`,
    )
  },
})

Hope that helps. 🙌

[SavioMenifer]

This approach works perfectly. Thank you for the quick reply!