Skip to content
Get help on Slack

Using sanity-codegen with @sanity/client to query data and generate types in TypeScript.

17 replies
Last updated: Feb 11, 2021
Does anybody have experience with using sanity-codegen ? I feel like the query below should work. It works if I just use 
*[_type == "country"]
but then it selects all of the values.
const allCountries = await client.query(
  '*[_type == "country"] { \'slug\': slug.current }'
);
Feb 11, 2021, 9:26 PM
When you query without the projection (i.e., just 
*[_type == "country"]
) is 
slug
at the top-level?
Feb 11, 2021, 9:30 PM
Yes
Feb 11, 2021, 9:31 PM
i actually think this is a bug in my code 😅
Feb 11, 2021, 9:32 PM
Aha, that explains it! I have been confused with this for a while now 😂
Feb 11, 2021, 9:33 PM
yeah apologies. to be frank, the sanity-codegen client is somewhat less stable than the codegen itself.
Feb 11, 2021, 9:37 PM
the codegen client is just a decent way to get automatic types with a relatively easy implementation but a real implementation of a codegen client would involve parsing groq queries and mapping projections from the codegen’ed schema types
Feb 11, 2021, 9:38 PM
so besides bundle size, you’ll really so no improvements over 
@sanity/client
for 
cilent.query
Feb 11, 2021, 9:39 PM
Ok thanks. My application is fairly simple so i’m not sure if I need anything particularly fancy. Would 
@sanity/client
work with the generated types? I’ve not looked into it much yet
Feb 11, 2021, 9:42 PM
it does but you’ll have to import the codegen types yourself and add them as a type parameter
e.g.


import * as Schema from '../codegen-output';

// e.g.
client.fetch<Schema.BlogPost[]>('*[ _type === 'blogPost' ]');
Feb 11, 2021, 9:45 PM
this would pair well with typescript’s utility types: https://www.typescriptlang.org/docs/handbook/utility-types.html
Feb 11, 2021, 9:46 PM
e.g. 
client.fetch<Pick<Schema.BlogPost, 'title'>[]>('*[ _type === 'blogPost' ] { title }');
Feb 11, 2021, 9:47 PM
Ok so i’ve tried this using 
@sanity/client
and it seems to work…
  const allCountries = await client.fetch<Country[]>(
    '*[_type == "country"] {_id, slug, name}'
  );
Would 
Country[]
or just 
Country
make sense there, seems like both work for me?
Feb 11, 2021, 9:52 PM
it would be 
Pick<Country, '_id' | 'slug' | 'name'>[]
Feb 11, 2021, 10:02 PM
Thanks for your help man, really appreciate it. I’m relatively new to TS so it’s a bit of a challenge
Feb 11, 2021, 10:14 PM
Of course. I think i’ll update the docs with some of this feedback too. I think it’ll really help others who are in the same boat.
Feb 11, 2021, 10:17 PM
My eventual goal is to get it to where it just generates the rights types for you automatically but I’m not quite there yet
Feb 11, 2021, 10:18 PM
That would be nice and I would help get to that point if I had the ability 😂
Feb 11, 2021, 10:30 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?