$2,500 in prizes up for grabs!
The Sanity Challenge on @dev.to is live through Oct 4. We can't wait to see what you build!
dev.to/challenges/s...
Sanity
@sanity.io
1.1K followers 0 following 222 posts
The Content Operating System for the AI era. Structured content that powers websites, apps, and agentic applications. Get started for free 👉 www.sanity.io
![// app/blog/page.tsx
import { defineQuery } from 'groq'
const postsQuery = defineQuery(`
*[_type == "post"]{
title,
"authorName": author->name,
"commentCount": count(comments),
"excerpt": pt::text(body)[0..200]
}
`)
// Generated in sanity.types.ts:
//
// type PostsQueryResult = Array<{
// title: string | null
// authorName: string | null // ← dereferenced join
// commentCount: number // ← always a number
// excerpt: string | null // ← GROQ function result
// }>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:blb25uhgtcwaiqjivuah67z3/bafkreidum7cj272hvuhgxpdijve64ykmrvennukuuyipfhbffjzjelk36i)
![import type { Get, FilterByType } from 'sanity'
import type { Page, PageBuilder } from './sanity.types'
// Before: extracting nested page builder types
type Hero = NonNullable<
NonNullable<Page['sections']>[number]
>['hero']
// After: with TypeGen's utility types
type Hero = Get<Page, 'sections[number].hero'>
type HeroBlock = FilterByType<PageBuilder, 'hero'>
// ^? { _type: "hero"; heading: string; image: ... }](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:blb25uhgtcwaiqjivuah67z3/bafkreidtyvem3ha25kd4a24qh6zvixl5ef6qoprazkyw27whkf6prviufe)
![import { defineQuery } from 'groq'
const postQuery = defineQuery(`
*[_type == "post"]{
title,
"authorName": author->name,
"commentCount": count(comments)
}
`)
// Generated type:
type PostQueryResult = Array<{
title: string
authorName: string
commentCount: number
}>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:blb25uhgtcwaiqjivuah67z3/bafkreia44ijyucpo4q55si4vb32zjdwh25ow5ewtsaudgofimnm3avyzdi)
![<LogoSoup
logos={["/logo1.svg", "/logo2.svg"]}
baseSize={48}
gap={16}
scaleFactor={0.5}
densityAware={true}
densityFactor={0.5}
alignBy="bounds" | "visual-center" | "visual-center-x" | "visual-center-y"
cropToContent={false}
// Custom image renderer (e.g. Next.js Image)
renderImage={(props) => (<CustomImageComponent ...props />
/>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:blb25uhgtcwaiqjivuah67z3/bafkreidorjbueu2p242n5dlmhk6vakvcu4qafwoesron54vvlfrdgpnv5a)
