Field hook for creating slug

default discord avatar
generator101
8 months ago
25

I am trying to use a hook for generating slug based on title



{
            name: 'title',
            required: true,
            type: 'text',
            localized: true,
        },
        {
            name: 'slug',
            required: true,
            type: 'text',
            unique: true,
            localized: true,
            hooks: {
                beforeValidate: [slugify('title')],
            },
        },


but I get this error:


 Field "slug" > "value" does not match any of the allowed types


I want to generate the slug from the title. I took a look at the website on GitHub (

https://github.com/payloadcms/website-cms/blob/b130b43cc1cf7a0ac1ba4c71ba7db90627f7a444/src/fields/slug.ts#L7

) and that is how I got the hook but I dont want to create another field called slug and etc, I just want to use it inside the collection file

  • discord user avatar
    jmikrut
    Payload Team
    8 months ago

    is it because you don't want the field to show up in the admin UI?



    i.e. = you just want the data to be in the API response, and not be editable



    to do that, you can set

    admin.disabled

    to

    true

    on your slug field



    and it will be hidden in admin UI

  • default discord avatar
    generator101
    8 months ago

    @jmikrut yes, the idea is to auto generate the slug value from the title automatically when post is saved



    but the issue is Field "slug" > "value" does not match any of the allowed types error

  • discord user avatar
    jmikrut
    Payload Team
    8 months ago

    that means you don't have your field config for the

    slug

    field correct



    can you copy / paste your

    slug

    field config here?

  • default discord avatar
    generator101
    8 months ago

    hum, I am not sure, I added it as a text field



    {
                name: 'slug',
                required: true,
                type: 'text',
                unique: true,
                localized: true,
                hooks: {
                    beforeValidate: [slugify('title')],
                },
            },


    slugify

    https://www.npmjs.com/package/slugify

    is this library I want to use



    to convert the title

  • discord user avatar
    jmikrut
    Payload Team
    8 months ago

    the error is because you are not writing your

    beforeValidate

    hook properly



    in that snippet, you're

    calling

    the function, which will likely return a string. The

    beforeValidate

    property can only accept an array of functions



    so you need to write your beforeValidate hook itself as a function, and not call it

  • default discord avatar
    generator101
    8 months ago

    oh I see, thank you



    I will give it a shot tomorrow morning



    @jmikrut I managed to get this working and use title automatically as a slug



    Thank you for your help

  • default discord avatar
    KasparTr
    7 months ago

    @generator101 could you kindly post your solution here? I'm also having issues working dynamically between different field selections.

  • default discord avatar
    generator101
    7 months ago

    sure



    @KasparTr here you go



    {
        name: 'slug',
        type: 'text',
        unique: true,
        localized: true,
        index: true,
        admin: {
            readOnly: true
        },
        hooks: {
            beforeValidate: [
                ({ req: { payload }, data }) => {
                    if (payload) {
                        return slugify(data.title)
                    }
                },
            ],
        },
    },


    I used this library

    https://www.npmjs.com/package/slugify


    to convert title to slug

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.