Auto-generating slugs for documents in Sanity using JS API
25 repliesLast 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
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.
I have a name field. and the slug source is set to that but when I create the doc its still empty
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
Does that name field has a reference to another schema?
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
the name field is only used in this schema
with the slug right under it
and here's the handleSubmit function that is submitting the doc
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'
}
}
}What am I missing?
There doesn't seem to be anything different about the slug there
What are you using to create the documents?
JS API
Well then you can look into our source code and use the slugify functionality to set the slug from the title input ..
And then create the new document with the slug set
So there's no way to just have it set the slug automatically? I have to pass in a slug myself?
When you use mutations you need to do that yourself, but it should only need 1-2 lines of code.
Gotcha, thanks
Did you find the right string methods?
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?
Did you patch the value to
slug.current?
Or just slug?
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
}
}Ahh perfect, ok got that working thank you!
saved my life !
Was this answer 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.
