Link resolving a parent/child relationship with one custom type

[joep.snijders]

Hi there,

Using Nuxt.js, I am trying to get a parent/child page relationship to work using only one 'contentpage' custom-type. I am looking to create the following url: domain.com/contentpage-one/contentpage-two.

To achieve this I added a 'Parent page' content-relationship field on the contentpage custom-type. So in the above scenario, the 'contentpage-two' page has 'contentpage-one' selected as its parent. However when using the 'prismic-link' component in Nuxt.js with the 'Parent page' content-relationship as field property, I don't have access to the slug of the actual page (only of the parent page) in the link resolver.

It would be great if someone could help me achieve this relationship in a way that's easy for clients to maintain and edit in Prismic.

Bonus: a 'domain.com/contentpage-one/contentpage-two/contentpage-three' option would be pretty great!

Thanks in advance,
Joep

[Phil (Phil Snow)]

Hi Joep,

Welcome to the community!

Here’s one I built recently. Since you’re passing the whole document to the link resolver you have access to the document data, so you can construct the link resolver like so:

  if (doc.type === 'contentpage') {
    if (!doc.data) {
      return `/${doc.uid}`
    } else {
      return (doc.data.parent_page ? `/${doc.data.parent_page.uid}/${doc.uid}` : `/${doc.uid}`)
    }
  }

This construction also runs a check to make sure the document data is there and for parent pages where the ‘parent_page’ content relationship is empty it returns the simple URL.

We have created a new Link Resolver which is only currently available for Slice Machine projects which will be able to handle grand parent relationships. Hopefully in the future we can roll this out for everyone. Until then this is the best way.

Let me know if you have any questions.

Thanks.

[joep.snijders]

Hi Phil,

Thank you so much for your reply. I tried your code, and it makes sense.

However for some reason the linkresolver is not being called when I pass the whole page object into the prismic-link vue component (like Link. It does work when I only pass in the parent_page content relationship object within the page object. The page object of the child page looks like this:

{
   "id":"XxKn6xEAACEAw7gl",
   "uid":"child-page",
   "type":"contentpage",
   "href":"https://sitemap-test.cdn.prismic.io/api/v2/documents/search?ref=XxwZ9BEAACMA7avw&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22XxKn6xEAACEAw7gl%22%29+%5D%5D",
   "tags":[

   ],
   "first_publication_date":"2020-07-18T07:42:38+0000",
   "last_publication_date":"2020-07-25T11:39:22+0000",
   "slugs":[
      "child-content-pagee",
      "child-content-pageee",
      "child-content-page"
   ],
   "linked_documents":[

   ],
   "lang":"nl-nl",
   "alternate_languages":[

   ],
   "data":{
      "title":[
         {
            "type":"heading1",
            "text":"Child content pagee",
            "spans":[

            ]
         }
      ],
      "parent_page":{
         "id":"XxKnuhEAACIAw7dJ",
         "type":"contentpage",
         "tags":[

         ],
         "slug":"parent-content-page",
         "lang":"nl-nl",
         "uid":"parent-page",
         "link_type":"Document",
         "isBroken":false
      }
   }
}

When I preview content from Prismic, the link resolver does resolve the correct link. Do you maybe have an idea why the link resolver is not called when passing in the whole page object?

Thanks a lot!

[Phil (Phil Snow)]

OK let’s look a bit more, can you share with me the code where you do your query and pass it to the prismic-link component? Maybe with a Github repo so I can check all your code.

[joep.snijders]

Thank you for helping!
I pushed the code to: https://github.com/JoepSnijders/prismic-nuxt-urls

[Phil (Phil Snow)]

Hey Joep,

So I figured it out. Thanks for sending your code to help.

When processing the link on your home page it’s a little different as you need to make sure you pass the page through the link resolver first, then pass this through the nuxt-link like shown below:

<nuxt-link :to="$prismic.linkResolver(page)">
  <prismic-rich-text :field="page.data.title" />
</nuxt-link>

I also noticed you did a check on the id in the link resolver, so for any future readers where the parent link is being returned with an undefined route, his different his check looks like this.

return (doc.data.parent_page.id ? `/${doc.data.parent_page.uid}/${doc.uid}` : `/${doc.uid}`)

Thanks.

[joep.snijders]

This works perfectly! Thanks!