How Typegen Has Helped Improve My Developer Workflow

As a developer working with Sanity.io and Next.js, I've always valued type safety and the productivity boost it provides. When I integrated TypeGen into the new and improved SanityPress starter template, the improvements to my workflow were immediate and significant. Let me walk you through how this seemingly small addition has transformed my development experience.

Sanity's typegen (short for "type generation") is a CLI tool that generates TypeScript types from your Sanity schemas and GROQ queries.

The Problem: Manual Type Management#

Before integrating TypeGen, my workflow looked something like this:

1. Write my Sanity Schema file.
2. In a separate Next.js types file, recreate and store the schema as a TypeScript object for all my schema types.
3. Every time my Sanity schema changed, I'd have to replicate those changes in my types file.
4. Since I declared my types globally, I could reference them with the Sanity.* namespace without imports, but maintaining them was tedious.

This manual process was not just time-consuming but error-prone and not scalable. A simple schema change meant updating types in multiple places, and any mismatch could lead to runtime errors that TypeScript wouldn't catch during development.

The Solution: Automatic Type Generation#

Practical setup (Next.js/monorepo friendly)#

Create a sanity-typegen.json file. Running the CLI command below will generate types to src/sanity/types.ts. I added an npm script to run extract + typegen on-demand:

{
  // ...
  "scripts": {
    "typegen": "sanity schema extract --path=./src/sanity/extract.json && sanity typegen generate"
  }
}

With TypeGen now integrated into the new SanityPress, my workflow has been streamlined dramatically to 4 simple steps:

1. Write the GROQ query: declare a variable with either defineQuery or groq.
2. Run the command: I run the typegen command and my types are auto-generated (based on how I write my GROQ queries) within seconds: npm run typegen
   1. I've set up my npm script as a VSCode/Cursor task with a keyboard shortcut (Shift + Cmd + R, then my command name "typegen").
3. Assign the type: I appropriate the type from '@/sanity/types' into it's correct place and that's it!
4. Repeat: If a schema is changed, I run the same command in step 1, and there's no need to worry about managing the types file.

The Code#

Types will be generated based on any GROQ queries defined either by the defineQuery function or groq template literal, assigned to it's own variable in any file.

// generates PAGE_QUERYResult
const PAGE_QUERY = defineQuery('*[_type == 'page']{ ... })

// generates SITE_QUERYResult
const SITE_QUERY = groq`*[_type == 'site][0]{ ... }'`

// no output (explicitly ignored)
// @sanity-typegen-ignore
const NAVIGATION_QUERY = groq`*[_type == 'navigation']{ ... }`

// no output (used not declared as a variable)
await client.fetch(groq`*[_type == 'redirect']{ ... }`)

Here's a sample usage in the sanityFetchLive function:

import type { PAGE_QUERYResult } from '@/sanity/types'

async function getPage(slug?: string[]) {
	return await sanityFetchLive<PAGE_QUERYResult>({
		query: PAGE_QUERY,
		params: { /* parameters allowed */ },
	})
}

const PAGE_QUERY = groq`*[_type == 'page' && metadata.slug.current == $slug][]{
  ...
}`

You'll also have access to any schema type that might be found in your GROQ queries, for use in module components:

import { PortableText } from 'next-sanity'
import type { MyHeroModule } from '@/sanity/types'

export default function ({ content = [] }: MyHeroModule) {
  return (
    <section>
      <PortableText value={content} />
    </section>
  )
}

The Impact: Real Numbers#

The time savings are substantial:

• Without TypeGen: 30 seconds to 1 minute per schema update
• With TypeGen: 3-5 seconds per schema update (~10x faster DX and far less keystrokes!)

Multiply this by every schema change during development, and it adds up to hours saved over the course of a project. But the benefits go beyond just time savings.

Beyond Time Savings: Better Developer Experience#

1. Reduced Cognitive Load#

I no longer need to context-switch between schema definition and type management. This means I can focus more on building features rather than maintaining type definitions.

2. Improved Type Safety#

Since types are generated directly from the schema, there's no risk of type mismatches. This means fewer runtime errors and more confidence in my code.

3. Better Autocomplete#

My IDE now provides accurate autocomplete suggestions based on the actual schema structure, making it faster to write queries and access content fields.

4. Easier Onboarding#

New developers joining the project don't need to learn a manual type management process. They can focus on understanding the schema and building features.

How It Works Under the Hood#

Sanity TypeGen works by analyzing your schema files and GROQ queries to generate TypeScript definitions. The process is simple:

1. Extract your schema structure with sanity schema extract
2. Generate types with sanity typegen generate

The CLI tool looks for GROQ queries in your codebase and generates type definitions for their results based on your schema. This means you get type safety not just for your schema but for your query results as well.

Getting Started with TypeGen in SanityPress#

If you're using SanityPress, adding TypeGen is straightforward:

1. Make sure you have the latest version of the Sanity CLI installed.
2. Run npm run typegen (the script is already set up in the starter).
3. Start using the generated types in your components.

If you're starting a new project, you can use the SanityPress with TypeGen starter template, which comes with TypeGen pre-configured.

Conclusion: Small Change, Big Impact#

Adding TypeGen to your Sanity codebase might seem like a small change, but its impact on my development workflow has been substantial. It's eliminated tedious manual work, reduced errors, and made my development experience more enjoyable.

If you're working with Sanity and TypeScript, I highly recommend giving TypeGen a try. The time you save and the improved developer experience are well worth the minimal setup effort.

And if you're starting a new project, check out SanityPress with TypeGen (and give it a star!). It's a lean, type-safe starter that will help you build better, faster.