Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Discussion on generating types for Sanity Client and alternatives

22 replies
Last updated: Feb 23, 2024
There something like this https://the-guild.dev/graphql/codegen for Sanity Client? I have my 
/frontend
dir next to my 
/backend
dir in a repo though so is the technique to move up the directory tree and import types from my 
/backend
?
Feb 8, 2024, 3:20 AM
Feb 8, 2024, 4:30 PM
Does this work if you’re not self-hosting studio?
Feb 9, 2024, 12:13 AM
It looks like this infers types from the definitions in studio schema. However I don’t have studio nested in my frontend so when I deploy my next project this wont work because it wont have access to the backend directory.
Feb 16, 2024, 2:25 AM
Yeah, I have the same issue. It would be nice to dump the schema into a singles file through codegen and easely copy and paste it into the frontend, but I'm nut sure how to handle all that at the moment.
Feb 19, 2024, 10:14 PM
There is 
ts-simplify
which you can use to get the "simple" types into a file, which you could copy/paste.
Feb 20, 2024, 2:20 AM
Thank you man
Feb 20, 2024, 3:15 AM
i’ll try that out thanks!
Feb 20, 2024, 3:15 AM
Probably a typo, you’re referring to this one https://www.npmjs.com/package/simplify-ts ?
Feb 20, 2024, 4:55 AM
Feb 20, 2024, 4:55 AM
How can i handle this?

const VARIANTS = [
  { title: 'Simple', value: undefined },
  { title: 'Caption', value: 'caption' as const },
  { title: 'Call to action', value: 'callToAction' as const },
  { title: 'Product hotspots', value: 'productHotspots' as const },
  { title: 'Product tags', value: 'productTags' as const },
]
Feb 20, 2024, 6:22 AM
i got my types generating on dev and build now though
 "scripts": {
    "dev": "sanity dev && npm run generate-types",
    "start": "sanity start",
    "build": "sanity build && npm run generate-types",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy",
    "generate-types": "npx ts-simplify ./sanity.config.ts ../frontend/types/sanity.d.ts -f"
  },
Feb 20, 2024, 7:07 AM
undefined
shouldn't be a valid value under your 
"Simple"
option.
Feb 20, 2024, 7:26 AM
It’s from https://github.com/sanity-io/sanity-shopify-studio studio starter. Lemme try and understand why they did that.
Feb 20, 2024, 7:27 AM
not many TS errors for this big project though, but my TS isn’t up to snuff quite yet. Trying to figure out this one atm.
Feb 20, 2024, 7:29 AM
interface ColorOption {
  title: string
}
Feb 20, 2024, 7:31 AM
https://www.sanity.io/docs/reference/api/sanity/TemplateFieldDefinition not sure if this is where i should be looking but I do see
options?: {
  [key: string]: any
}
Feb 20, 2024, 7:52 AM
I thought I was generating types at first turns out it was only generating a few types and I had too many errors so I went back to manual typing. I’ll come back to it later and potentially use another method
user L
Feb 21, 2024, 1:01 AM
Ok. I switched to graphql, it's pretty easy to add typescript codegen based on the queries. I can share the code if you still want to have a typed client.
Feb 22, 2024, 11:59 PM
Switching to graphql doesn’t seem minor tho. Do you still get the same ease with joining references like you do with groq? And then for your visualizer what is the alternative to the Vision plugin?
Feb 23, 2024, 12:24 AM
i use graphql for lots of other projects though so i have no aversion to it. Just curious how the experience is with sanity.
Feb 23, 2024, 12:55 AM
Sorry for the late answer.It's not a minor change, but in my case I was at the begging of the project. I mistakenly assumed it was the case for you as well.

Do you still get the same ease with joining references like you do with groq?
I don't have enough nested content to answer this with confidence, but I think you can query nested references easily. Let me know if that's not what you were asking.

And then for your visualizer what is the alternative to the Vision plugin?
You have a graphql playground similar to the vision tab. And it has schema introspection.

Just curious how the experience is with sanity.
I understand, in my opinion it's really worth the effort.
Feb 23, 2024, 8:30 PM
I can share my project playground link if you want. It has no sensitive data on it. And it's hosted on sanity.io domain.
Feb 23, 2024, 8:32 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?