Unique slug generation

Consider the

function in the official website template:

import type { FieldHook } from 'payload/types'

const format = (val: string): string =>
  val
    .replace(/ /g, '-')
    .replace(/[^\w-]+/g, '')
    .toLowerCase()

const formatSlug =
  (fallback: string): FieldHook =>
  ({ operation, value, originalDoc, data }) => {
    if (typeof value === 'string') {
      return format(value)
    }

    if (operation === 'create') {
      const fallbackData = data?.[fallback] || originalDoc?.[fallback]

      if (fallbackData && typeof fallbackData === 'string') {
        return format(fallbackData)
      }
    }

    return value
  }

export default formatSlug

This is great, but I can create two posts with the same title and two identical slugs will be created. Of course, I can use

to catch this behavior, but the function will return an error. This is also not very intuitive for the user.

Is there a way to modify the

function to make it able to generate a "-${number}" at the end of a non-unique slug, thus making sure that it will succeed everytime? WordPress has something like that for their slug creation.

In other words, how can I gracefully check if a title is unique inside the

function?

Thanks for your help.

You could do a

payload.db.collections['collection-name'].findOne({slug: "your-slug"})

then if there is already a document you could append a random string to the end.

- I added more rules to the

function to cover edge cases.

-

checks if a slug is found that correspond to the slugified title.

-

loops check if

is true. If it is, it add a

or increment the

if one already exists.

Here is the final code.

import type { FieldHook } from "payload/types";
import payload from "payload";

const format = (val: string): string =>
  val
    .normalize("NFKD")
    .replace(/[\u0300-\u036f]/g, "")
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9 -]/g, "")
    .replace(/\s+/g, "-")
    .replace(/-+/g, "-")
    .replace(/^-/, "")
    .replace(/-$/, "");

async function isTitleFound(title: string, collection: string) {
  const titleFound = await payload.find({
    collection: collection,
    where: {
      slug: {
        equals: title,
      },
    },
  });

  if (titleFound.docs.length > 0) return true;
  return false;
}

async function getUniqueSlug(slug: string, collection: string) {
  let i = 2;
  let isFound = await isTitleFound(slug, collection);
  const regex = /^.*-\d+$/;

  while (isFound) {
    if (regex.test(slug)) {
      const match = slug.match(regex);
      if (match) {
        i = parseInt(match[0].split("-").pop()) + 1;
      }
      slug = slug.replace(/\d+$/, "");
      slug += `${i}`;
    } else {
      slug += `-${i}`;
    }
    isFound = await isTitleFound(slug, collection);
  }

  return slug;
}

const formatSlug =
  (collection: string, fallback: string): FieldHook =>
  ({ operation, value, originalDoc, data }) => {
    if (typeof value === "string")
      return getUniqueSlug(format(value), collection);

    if (operation === "create") {
      const fallbackData = data?.[fallback] || originalDoc?.[fallback];

      if (fallbackData && typeof fallbackData === "string") {
        return getUniqueSlug(format(fallbackData), collection);
      }
    }

    return value;
  };

export default formatSlug;

Maybe Payload website template should be updated with something similar. Thanks to

for the tip : )