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

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

slugify

package 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 !

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 free Explore the demo

Auto-generating slugs for documents in Sanity using JS API

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?