Configuring Sanity TypeGen for multiple-folder projects

Before you can generate types for GROQ query results, you must add some configuration that tells the TypeGen tooling where to look for those queries and where to put the file with the generated types.

Before diving in, it’s important to remember that you are still dependent on the schema.json file to generate types for your front end. You should also keep in mind that every time you change the Studio’s schema, you will have to rerun the extraction, and every time you change a GROQ query, you should update your types as well.

Make a new file called sanity-typegen.json in your Studio folder and paste the following configuration into it:

{
  "path": "'../frontend/src/**/*.{ts,tsx,js,jsx}'",
  "schema": "schema.json",
  "generates": "../frontend/src/sanity/types.ts"
}

The configuration works like this:

• path configures where and which files Sanity TypeGen looks for GROQ queries. In this case, it will look through all the files in the front end’s src folder
• schema is where to find the static schema representation. The default value is schema.json.
• generates sets the path and the file name with the generated TypeScript definitions, in this case, in the front end’s sanity folder

With this configuration file in place, you can now run the typegen command:

npx sanity typegen generate

If run successfully, you’ll see the result like this:

✔ Generated TypeScript types for 14 schema types and 0 GROQ queries in 0 files into: ../frontend/src/sanity/types.ts

Notice how it says “0 GROQ queries,” this means you have to tweak your front end code to let Sanity TypeGen find your queries as well.