Get help on Discord

Sanity 3.16.7 import error in sanity.utils.ts after upgrade from 3.10.3

3 replies
Last updated: Sep 29, 2023
Hello Everyone! Recently I updated my Sanity Studio app by running "npm install sanity@latest" and after updating my app from 3.10.3 version to 3.16.7 I am receiving an error alert (attahed screenshot below). The error points to my sanity.utils.ts file and asks for the import, however I am not able to find any new imports from you Sanity docs, so if anybody had the same issue before, please help!
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}
        )

    }
AI Update

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:

  1. A TypeScript configuration issue after the Studio upgrade
  2. A recommendation to use the newer defineQuery approach
  3. A mismatch between your next-sanity and 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:

  1. Update next-sanity: Make sure your next-sanity package is also up to date:

    npm install next-sanity@latest

  2. Check package versions: Ensure there's no version mismatch between your Sanity packages:

    npm list sanity next-sanity @sanity/client

  3. Clear 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 thread
3 replies
Hey,
user S
. Have you made sure 
next-sanity
is also up-to-date?
Yep, you are right. It fixed my issue. Thaks for help, buddy!
Sure thing mate

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.

Get started for freeExplore the demo

Was this answer helpful?