Sanity 3.16.7 import error in sanity.utils.ts after upgrade from 3.10.3
Here is also my sanity.utils.ts file:
import { createClient, groq } from "next-sanity";
import {apiVersion, dataset, projectId} from "./env"
import { Project } from "../types/Project";
import { client } from "./lib/client";
import { Page } from "../types/Page";
export async function getProjects(): Promise<Project[]> {
const client = createClient({
projectId,
dataset,
apiVersion,
})
return client.fetch(
groq`*[_type == 'project']{
_id,
_createdAt,
name,
"slug": slug.current,
"image": image.asset->url,
}`
)
}
export async function getProject(slug: string): Promise<Project> {
const client = createClient({
projectId,
dataset,
apiVersion,
})
return client.fetch(
groq`*[_type == 'project' && slug.current == $slug][0]{
_id,
_createdAt,
name,
"slug": slug.current,
"images": images[].asset->url,
}`,
{slug}
)
}
export async function getPages(): Promise<Page[]> {
const client = createClient({
projectId,
dataset,
apiVersion,
})
return client.fetch(
groq`*[_type == 'page']{
_id,
_createdAt,
title,
"slug": slug.current,
}`
)
}
export async function getPage(slug: string): Promise<Page> {
const client = createClient({
projectId,
dataset,
apiVersion,
})
return client.fetch(
groq`*[_type == 'page' && slug.current == $slug][0]{
_id,
_createdAt,
"images": images[].asset->url,
title,
"slug": slug.current,
}`,
{slug}
)
}I can help you with this! Without seeing the exact error message from your screenshot, I'll address the most common issue that occurs after upgrading Sanity Studio and matches the symptoms you're describing.
The Most Likely Issue:
Your code is importing groq from next-sanity, which should still work in current versions. However, based on the SEO context mentioning "groq import" issues, you might be experiencing one of these scenarios:
- A TypeScript configuration issue after the Studio upgrade
- A recommendation to use the newer
defineQueryapproach - A mismatch between your
next-sanityand Sanity Studio versions
The Recommended Solution: Switch to defineQuery
The modern approach is to use defineQuery instead of groq. According to the defineQuery documentation, this provides better TypeScript support and enables automatic type generation. Here's how to update your sanity.utils.ts:
import { createClient, defineQuery } from "next-sanity"; // Change groq to defineQuery
import {apiVersion, dataset, projectId} from "./env"
import { Project } from "../types/Project";
import { client } from "./lib/client";
import { Page } from "../types/Page";
export async function getProjects(): Promise<Project[]> {
const client = createClient({
projectId,
dataset,
apiVersion,
})
return client.fetch(
defineQuery(`*[_type == 'project']{
_id,
_createdAt,
name,
"slug": slug.current,
"image": image.asset->url,
}`)
)
}
export async function getProject(slug: string): Promise<Project> {
const client = createClient({
projectId,
dataset,
apiVersion,
})
return client.fetch(
defineQuery(`*[_type == 'project' && slug.current == $slug][0]{
_id,
_createdAt,
name,
"slug": slug.current,
"images": images[].asset->url,
}`),
{slug}
)
}
// Apply the same pattern to getPages() and getPage()Alternative: Remove the Wrapper Entirely
If you don't need type generation, you can simply remove the groq wrapper and use plain template strings:
return client.fetch(
`*[_type == 'project']{
_id,
_createdAt,
name,
"slug": slug.current,
"image": image.asset->url,
}`
)The groq template tag was primarily for syntax highlighting and doesn't modify the query string, so removing it won't affect functionality.
Additional Steps:
Update
next-sanity: Make sure yournext-sanitypackage is also up to date:npm install next-sanity@latestCheck package versions: Ensure there's no version mismatch between your Sanity packages:
npm list sanity next-sanity @sanity/clientClear cache: Sometimes clearing your Next.js cache helps:
rm -rf .next npm run dev
Why defineQuery is Better:
Using defineQuery gives you:
- Syntax highlighting with the Sanity VS Code extension
- Automatic TypeScript type generation with Sanity TypeGen
- Better integration with modern Sanity tooling
If you're still seeing the error after trying these solutions, please share the exact error message from your screenshot so we can provide more specific guidance!
Show original thread3 replies
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
