Skip to content
Get help on Slack

Auto-generating slugs for documents in Sanity using JS API

25 replies
Last updated: Feb 20, 2023
Is there a way to have the slug field auto-generate a slug? I want to programmatically create documents from my website but the documents need a slug so the problem I am having is when I create the document I'll then need to go to my sanity backend to generate the slug. I know one option would be to handle slug generation on the frontend but would prefer to use the same function to generate a slug as my sanity backend would
Dec 27, 2022, 9:00 PM
To have a initial value for the slug on new document creation you first need to have some kind of data like a title in order to have something to work with. Normally, when you create a take for instance blog post everything is empty, but the publish date can be set to the current date because it's always available.
Dec 27, 2022, 9:29 PM
I have a name field. and the slug source is set to that but when I create the doc its still empty
Dec 27, 2022, 9:34 PM
That's because the name field on new document creation is empty. This initialValue thing only works on newly created documents and not on existing documents this is a good thing to remember. In order to have a initialValue for the slug you need some text for the name field
Dec 27, 2022, 9:35 PM
Does that name field has a reference to another schema?
Dec 27, 2022, 9:36 PM
The name field is set by a form and is not empty when the submit button is clicked. The documents are newly created docs not existing ones
Dec 27, 2022, 9:38 PM
the name field is only used in this schema
Dec 27, 2022, 9:39 PM
with the slug right under it
Dec 27, 2022, 9:39 PM
and here's the handleSubmit function that is submitting the doc
Dec 27, 2022, 9:39 PM
export default {
  name: 'name',
  title: 'name',
  type: 'document',
  initialValue: {
    tel: 06000000,
    geo: {
      _type: 'geopoint',
      lat: 1,
      lng: 2
    }
  },
  fields: [
    {
      name: 'title',
      title: 'title',
      type: 'string',
      validation: Rule => Rule.required(),
    },
    {
      name: 'key',
      title: 'key',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96
      }
    },
    {
      name: 'geo',
      title: 'geo',
      type: 'geopoint',
    },
    {
      name: 'tel',
      title: 'tel',
      type: 'string',
    },
  ],
  preview: {
    select: {
      title: 'title'
    }
  }
}

Dec 27, 2022, 9:49 PM
What am I missing?
Dec 27, 2022, 9:53 PM
There doesn't seem to be anything different about the slug there
Dec 27, 2022, 9:53 PM
What are you using to create the documents?
Dec 27, 2022, 9:54 PM
JS API
Dec 27, 2022, 9:54 PM
Well then you can look into our source code and use the slugify functionality to set the slug from the title input ..
Dec 27, 2022, 9:56 PM
And then create the new document with the slug set
Dec 27, 2022, 9:56 PM
So there's no way to just have it set the slug automatically? I have to pass in a slug myself?
Dec 27, 2022, 10:02 PM
When you use mutations you need to do that yourself, but it should only need 1-2 lines of code.
Dec 27, 2022, 10:05 PM
Gotcha, thanks
Dec 27, 2022, 10:07 PM
Did you find the right string methods?
Dec 27, 2022, 10:41 PM
I was using the 
slugify
package but am getting an error saying that it needs to be type slug and not string. How do I fix that?
Dec 27, 2022, 10:44 PM
Did you patch the value to 
slug.current
?
Dec 27, 2022, 10:50 PM
Or just slug?
Dec 27, 2022, 10:50 PM
Okay slug is actually stored as ab object since there can be multiple versions of slug stored.You need to patch it like this: 

slug: {
  current: slugify(values.name, {
    lower: true
  }
}
Dec 27, 2022, 10:55 PM
Ahh perfect, ok got that working thank you!
Dec 27, 2022, 11:05 PM
saved my life !
Feb 20, 2023, 11:01 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?