Get help on Discord

Migrating sanityClient import from v2 to v3 in schema file

4 replies
Last updated: Nov 30, 2025
Hi folks... just migrating my v2 studio to v3. Just a litte question here. How do i migrate this schema file regarding the new sanity client retrival?

import {FaMap} from "react-icons/fa";
import slugify from "slugify";
import sanityClient from 'part:@sanity/base/client'

function myAsyncSlugifier(input) {
    //const slug = slugify(input);
    /// The type of the reference field to get the value from
    const referenceNameType = 'city'
    /// Query for the referenced "category" and return the "name" field of that referenced document
    const query = `*[_type == "${referenceNameType}" && _id == $nameRef][0] {name}`
    /// Start with the "category: reference id in the draft
    let referenceName = input.cityRef
    /// Fetch the category referenced in this document
    return sanityClient.fetch(query, {nameRef: referenceName}).then(city => {
        /// Set the referenceName to the city.name field
        referenceName = !!city ? city.name : referenceName;
        return slugify(`${referenceName} - ${input.name}`, {lower: true});
    })
}

export default {
    name: 'neighbourhood',
    title: 'Stadtteile',
    type: 'document',
    icon: FaMap,
    fields: [
        {
            name: 'slug',
            title: 'Slug',
            type: 'slug',
            options: {
                source: (doc, options) => ({name: doc.name, cityRef: doc.city._ref}),
                maxLength: 100,
                slugify: myAsyncSlugifier
            },
        },
    ],
    preview: {
        select: {
            title: 'name',
            media: 'image',
            city: 'city.name'
        },
        prepare(selection) {
            const {title, city} = selection
            return {
                title: `${city} - ${title}`,
                //subtitle: date.split('-')[0] // YYYY-MM-DD --> YYYY
            }
        }
    },
}
AI Update

Looking at your v2 to v3 migration, you need to replace the old part:@sanity/base/client import with the new useClient hook. However, since your slugify function is being used in the schema definition (not inside a React component), you can't use the useClient hook directly there due to React's rules of hooks.

Here's how to migrate your code:

Option 1: Use createClient for schema-level operations

For functions that run outside React components (like your async slugifier), use createClient instead:

import {FaMap} from "react-icons/fa";
import slugify from "slugify";
import {createClient} from '@sanity/client'

// Create a client instance for use in the schema
const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  useCdn: false,
  apiVersion: '2023-05-24'
})

function myAsyncSlugifier(input) {
    const referenceNameType = 'city'
    const query = `*[_type == "${referenceNameType}" && _id == $nameRef][0] {name}`
    let referenceName = input.cityRef
    
    return client.fetch(query, {nameRef: referenceName}).then(city => {
        referenceName = !!city ? city.name : referenceName;
        return slugify(`${referenceName} - ${input.name}`, {lower: true});
    })
}

export default {
    name: 'neighbourhood',
    title: 'Stadtteile',
    type: 'document',
    icon: FaMap,
    fields: [
        {
            name: 'slug',
            title: 'Slug',
            type: 'slug',
            options: {
                source: (doc, options) => ({name: doc.name, cityRef: doc.city._ref}),
                maxLength: 100,
                slugify: myAsyncSlugifier
            },
        },
    ],
    preview: {
        select: {
            title: 'name',
            media: 'image',
            city: 'city.name'
        },
        prepare(selection) {
            const {title, city} = selection
            return {
                title: `${city} - ${title}`,
            }
        }
    },
}

Option 2: Get config from environment

If you have access to your sanity config, you can import it:

import {createClient} from '@sanity/client'
import {projectId, dataset} from '../sanity.config'

const client = createClient({
  projectId,
  dataset,
  useCdn: false,
  apiVersion: '2023-05-24'
})

Key changes from v2 to v3:

  • Replace import sanityClient from 'part:@sanity/base/client' with import {createClient} from '@sanity/client'
  • The useClient hook is only for use inside React components (like custom input components or tools)
  • For schema-level functions like your slugifier, use createClient directly
  • Make sure to specify an apiVersion (use the current date or a fixed date like '2023-05-24')

The rest of your schema code looks good and should work as-is in v3!

Show original thread
4 replies

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?