Slice Machine "fetchLinks" Data availability in Nuxt at the slice level

Developing with Prismic
1

Been scratching my head on this one, I have a fairly simple project. It has a page custom type, that type has a few fields such as page.title and page.description.

It also has a few slices, one of those has a "content relationship" field that allows to relate other page documents to it, to build a sort of "related pages" slice that I can add wherever I want on any page.

So far so good, on my _uid.vue page I have the following query:

const document = await $prismic.api.getByUID('page', params.uid, { fetchLinks: ['page.title','page.description'] });

And when I do a "print" on the page itself for the 7th slice (which is the one that has the content relationship field in my example page) like so:

{{ document.data.body[6] }}

I get this data back:
{ "slice_type": "page_cards", "slice_label": null, "version": "sktwi1xtmkfgx8626", "variation": "default-slice", "primary": {}, "items": [ { "page": { "id": "YfdpuhEAACAA6sFm", "type": "page", "tags": [], "slug": "typography", "lang": "en-ca", "first_publication_date": "2022-01-31T04:46:53+0000", "last_publication_date": "2022-01-31T04:48:44+0000", "uid": "typography", "data": { "title": "Typography", "description": "The typography page" }, "link_type": "Document", "isBroken": false } } ] }

That's perfect, the first item of the content relationship field has the "data" field with everything I need.

But when I print the exact same slice body data (by using {{ slice }}) prop from the slice itself (so that I can build the content relationship's layout), I get this instead:

{ "slice_type": "page_cards", "slice_label": null, "version": "sktwi1xtmkfgx8626", "variation": "default-slice", "primary": {}, "items": [ { "page": { "id": "YfdpuhEAACAA6sFm", "type": "page", "tags": [], "slug": "typography", "lang": "en-ca", "first_publication_date": "2022-01-31T04:46:53+0000", "last_publication_date": "2022-01-31T04:48:44+0000", "uid": "typography", "link_type": "Document", "isBroken": false } } ] }

Basically the exact same object minus the fetchLinks' data object that I have on the document level. It's missing the "data": { "title": "Typography", "description": "The typography page" } that I need to be able to effectively build my related content in the slice itself.

Any ideas? Thanks!

3

Hey @phil1,

Thanks for posting this issue, and welcome to the Prismic community :slight_smile:

Are you using vue-slicezone in Nuxt? If so, are you using the SliceZone's auto-fetch feature? (Presumably by passing a UID and Custom Type as props.) If so, then the SliceZone is fetching content independently — without your fetchLinks param. If that's the case, you can override the auto-fetch by passing the Slices manually. (See the vue-slicezone technical reference for more info.)

If that's not the case (which is certainly possible), then I'm not sure what could be causing this bug. Could you share your project with me as a ZIP file or GitHub repo? (You can send it to me in a DM if you like.)

Thanks,
Sam

4

Hello @samlittlefair, that was exactly it! I didn't know the slice-zone component did its own fetching.

I changed from this:

<slice-zone 
	type="page"
	:uid="$route.params.uid"
/>

to this

<slice-zone 
	type="page"
	:uid="$route.params.uid"
	:params="{ fetchLinks: ['page.title','page.description'] }"
/>

And now everything works great, thanks for pointing me in the right direction

1 Like
5

Great! So happy it worked out. Thanks for letting me know :slight_smile: