Prefetching KQL Queries

Prefetch custom queries at build time and serve static content with no request at runtime. Query results and their TypeScript types can be imported from #nuxt-kirby.

Add a prefetch object to your kirby configuration in nuxt.config.ts. Each key represents a query to prefetch.

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-kirby'],

  kirby: {
    // Prefetch queries at build-time
    prefetch: {
      site: {
        query: 'site',
        select: ['title']
      }
    }
  }
})

The query runs once per dev or build command, and its result is written to disk:

ℹ Prefetched KQL query "site" in 170ms

Now you can import the query result and its TypeScript type in your application:

// Import the type for the query result
import type { Site } from '#nuxt-kirby'

// Import the actual prefetched data
import { site } from '#nuxt-kirby'

INFO

The inferred type for the key will be pascal-cased, e.g. site becomes Site. If you have a query key with multiple words, e.g. blogPosts, the type will be BlogPosts.

Multi-Language Queries

If you have a multi-language Kirby instance, you can specify the language for each query individually.

To only prefetch the site query in German, set the language property for the query:

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-kirby'],

  kirby: {
    prefetch: {
      site: {
        // Define the KQL query and fields to select
        query: {
          query: 'site',
          select: ['title']
        },
        // Specify the language for this query
        language: 'de'
      }
    }
  }
})

INFO

In multi-language prefetching, note that the query to be fetched is nested inside a query object, while language is a sibling property.