Auto-generating slugs for documents in Sanity using JS API
25 replies
Last updated: Feb 20, 2023
B
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
N
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
B
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
N
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
N
Does that name field has a reference to another schema?
Dec 27, 2022, 9:36 PM
B
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
B
the name field is only used in this schema
Dec 27, 2022, 9:39 PM
B
with the slug right under it
Dec 27, 2022, 9:39 PM
B
and here's the handleSubmit function that is submitting the doc
Dec 27, 2022, 9:39 PM
N
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
B
What am I missing?
Dec 27, 2022, 9:53 PM
B
There doesn't seem to be anything different about the slug there
Dec 27, 2022, 9:53 PM
S
What are you using to create the documents?
Dec 27, 2022, 9:54 PM
B
JS API
Dec 27, 2022, 9:54 PM
S
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
S
And then create the new document with the slug set
Dec 27, 2022, 9:56 PM
B
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
S
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
B
Gotcha, thanks
Dec 27, 2022, 10:07 PM
S
Did you find the right string methods?
Dec 27, 2022, 10:41 PM
B
I was using the
slugifypackage 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
S
Did you patch the value to
slug.current?
Dec 27, 2022, 10:50 PM
S
Or just slug?
Dec 27, 2022, 10:50 PM
S
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
B
Ahh perfect, ok got that working thank you!
Dec 27, 2022, 11:05 PM
A
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.