--- title: "Queries and types · Sanity × Nuxt UI" description: "How GROQ queries are organized, typed with TypeGen and used in components." canonical_url: "https://sanity-nuxtui.vercel.app/docs/queries-and-types" meta: "og:description": "How GROQ queries are organized, typed with TypeGen and used in components." "og:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Queries%2Band%2Btypes%2Cdescription_~SG93IEdST1EgcXVlcmllcyBhcmUgb3JnYW5pemVkLCB0eXBlZCB3aXRoIFR5cGVHZW4gYW5kIHVzZWQgaW4gY29tcG9uZW50cy4%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9kb2NzL3F1ZXJpZXMtYW5kLXR5cGVzIg%2Cs_CCphhnck9gqe2rPY.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Queries and types · Sanity × Nuxt UI" "twitter:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Queries%2Band%2Btypes%2Cdescription_~SG93IEdST1EgcXVlcmllcyBhcmUgb3JnYW5pemVkLCB0eXBlZCB3aXRoIFR5cGVHZW4gYW5kIHVzZWQgaW4gY29tcG9uZW50cy4%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9kb2NzL3F1ZXJpZXMtYW5kLXR5cGVzIg%2Cs_CCphhnck9gqe2rPY.png" --- > Index of every page on this site: [llms.txt](https://sanity-nuxtui.vercel.app/llms.txt) [Docs](https://sanity-nuxtui.vercel.app/docs) # **Queries and types** How GROQ queries are organized, typed with TypeGen and used in components. All GROQ lives in `apps/web/app/utils/queries.ts`. Each query is wrapped in `defineQuery()`, which lets Sanity TypeGen find it and generate the type of its result. | **Query** | **Used by** | **Returns** | | --- | --- | --- | | `ROUTE_QUERY` | `pages/[...slug].vue` | The page, collection or entry at a path | | `LANGUAGES_QUERY` | `app.vue`, sitemap | The site language, other languages, fallback setting | | `SETTINGS_QUERY` | `app.vue` | Header, footer, labels, in the current language | | `SEARCH_QUERY` | `SiteSearch.vue` | Ranked search results | | `SITEMAP_QUERY` | `server/api/__sitemap__/urls.ts` | Every public URL with its translations | ## Fragments Queries are assembled from fragments, so a change in one place applies everywhere: - `LINK` resolves a `link` object to a `to` path, following translations. - `IMAGE` adds the low-quality placeholder ( `lqip`) to images. - `BLOCKS` expands page-builder blocks: links, images, and the entries of a Collection List. - `ENTRY_CARD` is everything a card needs. - `PATH` and `VIEW_PATH` build the URL of a document in GROQ, with the language prefix. **Keep fragments literal** Every fragment ends in as const, and helper functions take string literals only. useSanityQuery finds the result type by the exact text of the query, which only survives as a TypeScript literal type. TypeGen also cannot evaluate a helper called with a variable. ## TypeGen After changing a schema or a query, run: ``` pnpm typegen ``` It extracts the Studio schema to `apps/studio/schema.json` and writes `apps/web/sanity.types.ts`, with a type per schema type and a `_RESULT` type per query. `app/types/sanity.ts` derives the handy ones: `PageData`, `EntryData`, `EntryCard`, `BlockOf<'hero'>`. ## Fetching Components fetch with `useSanityQuery` from `@nuxtjs/sanity`. It is typed by the query, reacts to parameter changes and supports live updates in the Presentation tool: app/pages/\[...slug].vue ``` const { data, encodeDataAttribute } = await useSanityQuery(ROUTE_QUERY, { path: computed(() => parts.value.join('/') || 'home'), language, defaultLanguage: computed(() => config.value.defaultLanguage), // …}) ``` `encodeDataAttribute` makes blocks draggable in the Presentation tool; `PageBlocks.vue` uses it. ## Parameters Queries that depend on the language take `$language`, `$defaultLanguage`, `$languages` and `$fallback`. See [**Languages**](https://sanity-nuxtui.vercel.app/docs/languages) for what each one does. ## Trying queries Open ****Vision**** in the Studio to run GROQ against your dataset. Paste a query from `queries.ts` and set its parameters in the panel below. [**Adding a block** Turn any Nuxt UI component into a block editors can use, in five steps.](https://sanity-nuxtui.vercel.app/docs/adding-a-block) [**Theming** Colors, fonts, component styles and the motion utilities of the Swiss theme.](https://sanity-nuxtui.vercel.app/docs/theming) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://sanity-nuxtui.vercel.app/#website","@type":"WebSite","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app/","publisher":{"@id":"https://sanity-nuxtui.vercel.app/#identity"}},{"@id":"https://sanity-nuxtui.vercel.app/docs/queries-and-types#webpage","@type":"WebPage","dateModified":"2026-10-16T02:29:18Z","description":"How GROQ queries are organized, typed with TypeGen and used in components.","name":"Queries and types","url":"https://sanity-nuxtui.vercel.app/docs/queries-and-types","isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://sanity-nuxtui.vercel.app/docs/queries-and-types"]}]},{"@id":"https://sanity-nuxtui.vercel.app/#identity","@type":"Organization","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app"},{"@id":"https://sanity-nuxtui.vercel.app/docs/queries-and-types#article","@type":"Article","dateModified":"2026-10-16T02:29:18Z","description":"How GROQ queries are organized, typed with TypeGen and used in components.","headline":"Queries and types","inLanguage":"en","thumbnailUrl":"https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Queries%2Band%2Btypes%2Cdescription_~SG93IEdST1EgcXVlcmllcyBhcmUgb3JnYW5pemVkLCB0eXBlZCB3aXRoIFR5cGVHZW4gYW5kIHVzZWQgaW4gY29tcG9uZW50cy4%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9kb2NzL3F1ZXJpZXMtYW5kLXR5cGVzIg%2Cs_CCphhnck9gqe2rPY.png","author":{"@id":"https://sanity-nuxtui.vercel.app/#identity"},"image":{"@id":"https://sanity-nuxtui.vercel.app/#/schema/image/1"},"isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/docs/queries-and-types#webpage"},"mainEntityOfPage":{"@id":"https://sanity-nuxtui.vercel.app/docs/queries-and-types#webpage"},"publisher":{"@id":"https://sanity-nuxtui.vercel.app/#identity"}},{"@id":"https://sanity-nuxtui.vercel.app/#/schema/image/1","@type":"ImageObject","contentUrl":"https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Queries%2Band%2Btypes%2Cdescription_~SG93IEdST1EgcXVlcmllcyBhcmUgb3JnYW5pemVkLCB0eXBlZCB3aXRoIFR5cGVHZW4gYW5kIHVzZWQgaW4gY29tcG9uZW50cy4%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9kb2NzL3F1ZXJpZXMtYW5kLXR5cGVzIg%2Cs_CCphhnck9gqe2rPY.png","inLanguage":"en","url":"https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Queries%2Band%2Btypes%2Cdescription_~SG93IEdST1EgcXVlcmllcyBhcmUgb3JnYW5pemVkLCB0eXBlZCB3aXRoIFR5cGVHZW4gYW5kIHVzZWQgaW4gY29tcG9uZW50cy4%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9kb2NzL3F1ZXJpZXMtYW5kLXR5cGVzIg%2Cs_CCphhnck9gqe2rPY.png"}]} ``` ## Sitemap See the full [sitemap](https://sanity-nuxtui.vercel.app/sitemap.md) for all pages.