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

32 replies
Last updated: Oct 12, 2021
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:
*[type == 'content'] {
  "children": *[_type == 'content' && references(^.^._id)] {
How would I add a “href” variable to this query that would be based on its parent document?
Sep 10, 2021, 8:28 AM
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.
Sep 10, 2021, 9:24 AM
Ooh that’s sounds cool, never used slugs before, could you give me a hint? 🙂
Sep 10, 2021, 9:29 AM
Forgot to mention that you need to add a reference from child->parent for it to work
Sep 10, 2021, 9:30 AM
Sorry, missed that there was a magic function in the first snippet
Sep 10, 2021, 9:32 AM
Cool, thanks! Trying to log out input and type arguments to the console, but nothing gets put out, did you experience something similar?
Sep 10, 2021, 10:07 AM
Not sure if the method is running or not
Sep 10, 2021, 10:07 AM
sorry, missed one field
Sep 10, 2021, 10:08 AM
add this to the options object on the
source: (doc, options) => ({ doc, options }),
Sep 10, 2021, 10:08 AM
inside the options object?
Sep 10, 2021, 10:09 AM
Sep 10, 2021, 10:09 AM
options: {
        source: (doc, options) => ({ doc, options }),
        slugify: asyncSlugifier,
Sep 10, 2021, 10:10 AM
Some more information about the slug type: https://www.sanity.io/docs/slug-type
Sep 10, 2021, 10:12 AM
Great, will check it out, thanks a bunch!
Sep 10, 2021, 10:13 AM
No worries 🙂
Sep 10, 2021, 10:19 AM
I made a little write up about this and published on my blog. If you have the time I’d love your input.
Sep 10, 2021, 12:16 PM
For sure
Sep 10, 2021, 2:43 PM
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?
Sep 10, 2021, 2:44 PM
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
Sep 10, 2021, 2:44 PM
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.
Sep 10, 2021, 2:46 PM
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.
Sep 10, 2021, 2:47 PM
Great article! And a hip site also 💯
Sep 10, 2021, 2:48 PM
Haha cheers mate
Sep 10, 2021, 2:48 PM
jag tänkte väl att det var något väldigt svenskt över ditt namn 😄
Sep 10, 2021, 2:52 PM
läste din bio
Sep 10, 2021, 2:52 PM
sitter du i melbourne nu eller?
Sep 10, 2021, 2:53 PM
Haha jepp
Sep 10, 2021, 2:53 PM
Sep 10, 2021, 2:53 PM
Ah, har bott här i snart 5 år totalt
Sep 10, 2021, 2:53 PM
varit där en gång å hälsa på släkt å vänner för massa år sen, ballt ställe
Sep 10, 2021, 2:54 PM
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
Sep 10, 2021, 2:55 PM
user S
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.
Oct 12, 2021, 10:21 AM
Could it be that an initialValue is set? It shouldn't automatically set the parent to anything at all unless you select it 🤔
Oct 12, 2021, 10:34 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?