How to create a dynamic slug in Strapi v4?

Question

I want to create a slug for the url as soon as the user adds an event from the frontend. The slug is based on the name of the event. How to do that in V4 as the old method does not work now?

Slug creation link - old version

Answer 1

This seem to work for me

Settings > Roles > Public > Slugify (checkbox findSlug) config/plugins.js

module.exports = ({ env }) => ({
  slugify: {
    enabled: true,
    config: {
      contentTypes: {
        page: {
          field: "slug",
          references: "name",
        },
        post: {
          field: "slug",
          references: "name",
        },
        category: {
          field: "slug",
          references: "name",
        },
      },
    },
  },
});

graphql

const POSTS = gql`
  query GetPosts {
    posts {
      ... on PostEntityResponseCollection {
        data {
          __typename
          id
          attributes {
            __typename
            name
            slug
            content
            featuredImage {
              data {
                __typename
                id
                attributes {
                  url
                  alternativeText
                  caption
                }
              }
            }
            createdAt
          }
        }
      }
    }
  }
`;

const POST = gql`
  query GetPost($slug: String!) {
    findSlug(modelName: "post", slug: $slug, publicationState: "live") {
      ... on PostEntityResponse {
        data {
          __typename
          id
          attributes {
            createdAt
            name
            slug
            content
            seo {
              __typename
              id
              title
              description
              blockSearchIndexing
            }
            categories {
              __typename
              data {
                __typename
                id
                attributes {
                  __typename
                  name
                  slug
                }
              }
            }
          }
        }
      }
    }
  }
`;

Answer 2

By following the article, it seems that you are trying to add lifecycle events to a model. You would need to make the following modifications to the article to make it work for v4.

After the creation of the article model via the admin dashboard, instead of adding the following file:

./api/article/models/Article.js

add:

./src/api/article/content-types/article/lifecycles.js

With the following:

const slugify = require('slugify');

module.exports = {
    async beforeCreate(event) {
      if (event.params.data.title) {
        event.params.data.slug = slugify(event.params.data.title, {lower: true});
      }
    },
    async beforeUpdate(event) {
      if (event.params.data.title) {
        event.params.data.slug = slugify(event.params.data.title, {lower: true});
      }
    },
};

Also the api endpoint changed in v4 so you would need to use:

GET /api/articles?filters[slug]=my-article-slug