Generating types for GROQ query results

With the TypeGen configuration set up to look for GROQ queries in your front end project, the last step is to make those queries discoverable for the tooling.

First, go into your front end folder. If you follow this course with the code from the Day One course, you can search for EVENTS_QUERY to find the index route file.

const EVENTS_QUERY = `*[_type == "event" && defined(slug.current)]{_id, name, slug, date}|order(date desc)`;

To get types for GROQ query results from TypeGen, you need to make sure of the following:

• The string with the query is assigned to a variable
• The variable name needs to be globally unique since it’s used for the type name
• The string needs to be a syntactically valid GROQ query (for example, you should be able to run it successfully in the Vision plugin or on groq.dev)
• The string with the query needs to be prefixed with the groq template literal or the defineQuery helper function

The EVENTS_QUERY is only missing the last point to be picked up by the TypeGen command.

If you’re using Next.js, you can import groq and defineQuery from the next-sanity package.

For other frameworks, you can install the groq package:

npm i groq

Add the defineQuery function like this; remember to save the file after:

import { defineQuery } from 'next-sanity'
// import { defineQuery } from 'groq' // in other frameworks

const EVENTS_QUERY = defineQuery(`*[_type == "event" && defined(slug.current)]{_id, name, slug, date}|order(date desc)`)

Both the groq template literal and defineQuery function will add syntax highlighting to VS Code when you have the Sanity extension installed. It’s also used by the TypeGen tooling to identify something as a GROQ query.

Return to the Studio folders and run the npx sanity typegen generate command again. It should pick up the GROQ query, and the output should be like this:

✔ Generated TypeScript types for 14 schema types and 1 GROQ queries in 1 files into: ../day-one-with-sanity-nextjs/src/sanity/types.ts

Open your types.ts file in your front end folder, and search for EVENTS_QUERY to find your new type:

// Source: ../frontend/src/app/page.tsx
// Variable: EVENTS_QUERY
// Query: *[_type == "event" && defined(slug.current)]{_id, name, slug, date}|order(date desc)
export type EVENTS_QUERYResult = Array<{
  _id: string;
  name: string | null;
  slug: Slug | null;
  date: string | null;
}>;

Thanks to automatic type inference, this type should be automatically applied when using Sanity Client's fetch.

const events = await client.fetch(EVENTS_QUERY);
      // ^ typed as EVENTS_QUERYResult

Using these GROQ query result types with Sanity Client is covered in the Display content in a Next.js front end lesson of the Day One with Sanity Studio course, which you should have already completed.