# Generating types for GROQ query results

https://www.sanity.io/learn/course/typescripted-content/generating-type-for-groq-query-results.md

Make your queries discoverable. Generate TypeScript types for your GROQ queries.

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.

```typescript:./src/app/page.tsx
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](https://groq.dev))
* The string with the query needs to be prefixed with the `groq` [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) or the `defineQuery` helper function

1. Prefer the `defineQuery` function over `groq`, as it also unlocks automatic type inference when using Sanity Client

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:

```sh:Terminal
npm i groq
```

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

```typescript
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)`)
```

1. Import `defineQuery` into the route file with the `EVENTS_QUERY` variable
2. Add the `defineQuery` template literal to your GROQ query string

Both the `groq` template literal and `defineQuery` function will add syntax highlighting to VS Code when you have the [Sanity extension installed](https://marketplace.visualstudio.com/items?itemName=sanity-io.vscode-sanity). 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:

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

1. Generate your types again to create types for GROQ queries

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

```typescript:./src/sanity/types.ts
// 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;
}>;
```

1. Find the `EVENTS_QUERYResult` type in `types.ts`

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

```typescript
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 Next.js](https://www.sanity.io/learn/course/day-one-with-sanity-studio/bringing-content-to-a-next-js-front-end) lesson of the [Day one content operations](https://www.sanity.io/learn/course/day-one-with-sanity-studio) course, which you should have already completed.