Get help on Discord

Slug not auto-generating when clicking 'Generate' button

4 replies
Last updated: Jun 20, 2023
Slug isn't auto-generating when clicking 'Generate' - code in thread
AI Update

Based on the slug field documentation, when the "Generate" button isn't working, here are the most common causes and solutions:

1. Check your source field configuration

The most likely issue is that your source field isn't properly configured. Make sure you have a source specified in your slug field definition:

{
  name: 'slug',
  type: 'slug',
  options: {
    source: 'title' // or whatever field you want to generate from
  }
}

2. Verify the source field has content

The Generate button won't work if the source field (like title) is empty. Make sure you've entered content in the source field before clicking Generate.

3. Check for reference-based sources

If you're trying to generate a slug from a reference field, you may need additional configuration. The source needs to properly resolve the referenced document's data:

source: doc => doc.referencedField?.title

4. Custom slugify function issues

If you're using a custom slugify function in your options, make sure it's returning a valid string. A broken custom function will prevent slug generation from working.

5. Studio environment requirement

Important to note: slug generation only works within Sanity Studio itself. If you're trying to create documents via the HTTP API or programmatically, you'll need to implement your own slugification function (Sanity uses speakingurl internally).

If you can share the specific code from your schema definition, I can help pinpoint the exact issue! The most common fix is simply ensuring the source option is correctly defined and points to a field with actual content.

Show original thread
4 replies

import {defineType, defineField} from 'sanity'

export default defineType({
  type: 'object',
  title: 'Swatch',
  name: 'swatch',
  fields: [
    defineField({
      title: 'Name',
      name: 'name',
      type: 'string',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      title: 'Handleized name',
      name: 'handle',
      type: 'slug',
      options: {
        source: 'name',
        disableArrayWarning: true,
      },
      description: "",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      title: 'Color',
      name: 'color',
      type: 'color',
      validation: (Rule) => Rule.required(),
    }),
  ],
  preview: {
    select: {
      title: 'name',
      subtitle: 'color.hex',
      media: 'color',
    },
    prepare({title, subtitle, media}) {
      return {
        title,
        subtitle,
        media: <div style={{backgroundColor: media.hex, width: '100%', height: '100%'}} />,
      }
    },
  },
})
Doesn't seem to be doing anything except from saving the document on click of generate.
Since this is part of an object, you may need to specify the full path (e.g., it looks like 
swatch.name
, but you’ll want to check on your schema). I don’t know if this is the cause, but would be worth checking if that resolves this.
Just confirmed this. Your slugify function is looking for a 
name
property at the top level of the document.
Thanks
user A
. That answers it, this is in an array as well.

source: (_, context) => context.parent.name,
This was the fix
🙂

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?