Get help on Discord

Migrating schema file to v3 and updating slugify example.

4 replies
Last updated: Jun 13, 2023
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!

oh. Looks like you fine people have updated your slugify example. This should work then:

async function myAsyncSlugifier(input, schemaType, context) {
  const slug = slugify(input)
  const {getClient} = context
  const client = getClient({apiVersion: '2022-12-07'})
  ...
}
Let’s use greetings like “Hey Everyone,” “Hi, Y’all," or “Hello, Folks” to make sure everyone in the community is included. Please read the Sanity Community Code of Conduct to stay updated on expected communication & behavior in our spaces: https://www.sanity.io/docs/community-code-of-conduct
kudos to the writers of the migration guide... THIS IS AWESOME!
Glad the guide was 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.

Get started for freeExplore the demo

Was this answer helpful?