Groq

This module exports the official groq template tag function for writing GROQ queries with syntax highlighting. Make sure to install the VSCode extension for the best experience.

Both groq and defineQuery are globally available throughout your project (in server routes and Vue components) via auto-imports.

groq

Use the groq template tag to write your GROQ queries:

<script setup>
// In VS Code this will be highlighted
const query = groq`*[_type == "article"][0].title`
</script>

defineQuery

The defineQuery function is an alias for groq that can be used when you prefer a more explicit function-call style:

<script setup>
const query = defineQuery(`*[_type == "article"][0].title`)
</script>

Both produce identical results. defineQuery is particularly useful when working with type generation, as the @sanity/codegen tool recognizes both patterns when scanning for queries.

Type Generation

When type generation is enabled, queries written with groq or defineQuery are automatically discovered and typed. The generated types follow a naming convention based on your query variable name:

<script setup lang="ts">
// Query variable: articlesQuery -> Generated type: ArticlesQueryResult
const articlesQuery = groq`*[_type == "article"] { title, slug }`

const { data } = await useSanityQuery<ArticlesQueryResult>(articlesQuery)
// data is typed as Ref<{ title: string; slug: { current: string } }[] | null>
</script>