Discussion on creating hierarchical slugs in Sanity.io using parent-child reference setup and async slugifier

Hello there, I have a child->parent hierarchy reference setup and I would like to create some sort of href variable for the hierarchy. Let’s say that you have the root parent called “Root” which has one child and one grand child. The href for the root page would then be “root” say. Its child would have have “root/child” as href, and finally the grand child “root/child/grandchild”. I have a groq query similar to this:
How would I add a “href” variable to this query that would be based on its parent document?

Could you add it to the document as a slug? That’s how I’ve done it, then I use a custom async slugyfier to fetch the parent and build the slug based on the parent’s slug. That way you always get a full path from root to grand child of any level automatically since each level’s slug is built on the previous one.

Ooh that’s sounds cool, never used slugs before, could you give me a hint? 🙂

Forgot to mention that you need to add a reference from child->parent for it to work

Sorry, missed that there was a magic function in the first snippet

Cool, thanks! Trying to log out input and type arguments to the console, but nothing gets put out, did you experience something similar?

Not sure if the method is running or not

sorry, missed one field

add this to the options object on the

slug

field:

inside the options object?

yep

Some more information about the slug type: https://www.sanity.io/docs/slug-type

Great, will check it out, thanks a bunch!

No worries 🙂

I made a little write up about this and published on my blog. If you have the time I’d love your input.

For sure

Btw have you managed to create a slur automatically, updating once a parent document’s slur changes or a parent is added to a child?

Cheers mate, I appreciate it 🙂 https://maxkarlsson.dev/blog/how-to-make-hierarchical-slugs-in-sanity
Let me know if something is unclear or I missed something

I haven’t, but you could do that with webhooks and a serverless function for example. It wouldn’t work with that async slugifier function. It’s only called when you click the button in the studio so it’s not aware of any changes unless it’s called.

The method to build the slug would be the same, you just need a way to react to the changes to a document, then query all documents that refer to that parent and update them.

Great article! And a hip site also 💯

Haha cheers mate

jag tänkte väl att det var något väldigt svenskt över ditt namn 😄

läste din bio

sitter du i melbourne nu eller?

Haha jepp

sweet!

Ah, har bott här i snart 5 år totalt

varit där en gång å hälsa på släkt å vänner för massa år sen, ballt ställe

Ja, jag trivs bra här. Kom hit som backpacker för 10 år sen, åkte lite fram och tillbaka i några år tills vi flyttade ner permanent

Hi I'm using your wonderful hierarchical slug solution and I ran in to a strange problem. I noticed that pages with no parent set are displaying 'Untitled' in the Parent reference field if I open them again after the initial publish. If I then press the generate button on the slug field of any child pages, the slug breaks.

Could it be that an initialValue is set? It shouldn't automatically set the parent to anything at all unless you select it 🤔