How to make dynamically generating slug in WeaveDB?

Are you also getting issues while generating slugs in WeaveDB, JSON doesn’t support slug as a type, No more struggle!

So let’s learn it through an example :

You are making a Blog posting website for showcasing your understanding on the particular topic with the integration of WeaveDB.

This is how our schema is defined 👇.

{
  "type": "object",
  "properties": [
    {
      "title": {
        "type": "string"
      },
      "description": {
        "type": "string"
      }
    }
  ]
}

Your add query looks like this for now atleast :

await db.add({ title: titles, description: descriptions}, "Blogs")

You might be wondering why I am passing titles to the title and descriptions to the description.

Because I have set the input in such a that it gives data to the states, the states are defined as these

const [titles, setTitles] = useState("");
const [descriptions, setDescriptions] = useState("");

So that’s why I am setting them as title : titles and description : descriptions.

Ok! So basic structure might be clear now.

Producing slugs by altering add query

So you might have figured out now, that you want another property other than the title and description!

Now, the updated schema should look like this 👇

{
  "type": "object",
  "properties": [
    {
      "title": {
        "type": "string"
      },
      "description": {
        "type": "string"
      },
      "slug" : {
        "type": "slug"
      }
    }
  ]
}

Since we have added slug in the schema, we can use it now directly in the query to make slugs automatically whenever a add query is fired to create new blog.

Let us look at the query again where we are going to add the slug.

await db.add({title:titles,description:descriptions,slug:titles}, "Blogs")

Your expression would be like why are we passing titles again in the slug, we are already going that in titles.

But here’s a twist, to generate we will use different kind of query

await db.add({title:titles,description:descriptions, slug:titles.split(" ").join("-").toLowerCase()}, "Blogs")

Let’s say we have “Sonic Free Games”

I want to convert it to “sonic-free-games”

That’s why we are using these JavaScript built-in functions.

Note for Novice : The split function removes the whitespace in between the words and the join function will replace the whitespaces with these “-”.

Output

Let’s get the last and most IMP part understood

For Example :

You wrote the title = How to use React useState Hook

and in description = Blah…Blah…Blah

BOOM!

The data registered in WeaveDB would be like this

title = How to use React useState Hook

description = Blah… Blah… Blah

slug = how-to-use-react-usestate-hook

So what happened here is the query we sent already got the altered data no need to change it through Database or no other hassles.

You can use this slug data for NextJS’s Server Side Rendering part.

That’s it for this blog guys, You can reach me out at Twitter

Subscribe