Sanity.io: A slug field with a prefix based on a "category" reference's slug

postType.ts

import {SlugSourceFn, SlugifierFn, defineField, defineType} from 'sanity'
import get from 'lodash/get'

// Fetch the category's slug – if present – and append the post's title
const handleSlugSource: SlugSourceFn = async (doc, context) => {
  const categoryRef = get(doc, `category._ref`)

  if (categoryRef) {
    const client = context.getClient({apiVersion: `2023-07-01`})
    const categorySlug = await client.fetch(`*[_id == $id][0].slug.current`, {id: categoryRef})

    if (categorySlug) {
      return `${categorySlug}/${doc.title}`
    }
  }

  return String(doc.title)
}

// DIY basic slugifier
const slugify = (source: string) => source.toLowerCase().replace(/\s+/g, `-`)

// Default slugifier would replace the `/` inserted above with a `-`
const handleSlugify: SlugifierFn = (source, schemaType, context) => {
  return `/` + source.split(`/`).map(slugify).join(`/`)
}

// Example schema with a slug field
// which will take the category's slug – if present – and append the post's title
export const postType = defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      type: 'slug',
      options: {
        source: handleSlugSource,
        slugify: handleSlugify
      },
      // In this validation rule, we check that the slug starts with the category's slug
      // You would need to update this logic if "category" was also required
      validation: rule => rule.custom(async (value, context) => {
        if (!value?.current) {
          return `Slug is a required field`
        }

        const categoryRef = get(context.document, `category._ref`)

        if (categoryRef) {
          const client = context.getClient({apiVersion: `2023-07-01`})
          const categorySlug = await client.fetch(`*[_id == $id][0].slug.current`, {id: categoryRef})

          if (categorySlug && !value.current.startsWith(`/${categorySlug}/`)) {
            return `Slug must start with the category's slug`
          }
        } else if (!value.current.startsWith(`/`)) {
          return `Slug must start with a /`
        }

        return true
      })
    }),
    defineField({
      name: 'category',
      type: 'reference', to: {type: 'category'}
    }),
  ],
  preview: {
    select: {
      title: 'title',
      subtitle: 'slug.current',
    },
  },
})