Fetch deep content relationship using javascript library

[jasper (Jasper Verbeet)]

Hey,

I've got a situation where I've got a content relationship within a content relationship. When I try to access the deepest content relationship (a custom type named 'button'), it only gives me the ID back, which makes sense as I don't have it defined in the 'fetchLinks' options.

I am using the Prismic Javascript Library with Nuxt.js

   await $prismic.getSingle('type', {
     fetchLinks: [
       'button.button_link',
       'button.button_text',
       'deeprelation.button.button_link',
       'deeprelation.button.button_text',
     ]
   });

Currently I receive this, where button_link is not a Document type, but just an ID

I want to receive something like this, so I can make the button link to another page.

How can I get the button data of the button in the 'deeprelation' field? I've been struggling to find an answer to this.

Thanks for checking this out

[Pau]

Hello Jasper!

Thank you for reaching out and welcome to the forum

FetchLinks allows you to retrieve a specific content field from a linked document. But, if this linked document has another linked document inside of it you'll have to perform another query. One that, in your case gets the 'Button' custom type first by doing a Query by Content relationship field and then again use fetchlinks to get the desired field from the 'nested' document.

Query by a Content Relationship field with Vue.js - Prismic