Broken document links in Slice Simulator

[thomas.digregorio]

Hi Prismic people,

I’m having a issue with the live editing which displays only parts of my slices

Issue

• When trying to live preview slices in the page builder, linked documents are broken links
• It works fine in production, just the live editing does not fetch the field
• Note that I’m discovering this as I’m migrating from the legacy builder to Slice Machine, using the slice upgrade tool from the lab

Impacted feature

Live editing, in the page builder

What steps have you taken to resolve this issue already?

Allow a deep fetch of the fields in the Slice Machine interface

Your Role

Developper

Hosting provider

Netlify

Package.json file

"@nuxtjs/prismic": "^4.1.0",
"@slicemachine/adapter-nuxt": "^0.3.95",
"nuxt": "^3.18.1",
"slice-machine-ui": "^2.21.1",

[Pau]

Hey Thomas! are you referring to the slice previews on the left side inside the Page Builder?

Those are basically just like thumbnails of each slice. They’re not full renders of the page, so things like links won’t really behave like they do in production they’re not clickable.

Can you share a bit more about what you expected to see vs what you’re actually seeing? That’ll help figure out if something’s off or just expected behavior.

[thomas.digregorio]

Hi @Pau

Yes, I’m referring to the slice previews inside the Page builder.

I’m talking about Content Relationships, not clickable links.

I’ve set up Slice Machine to fetch my logo fields

For instance,

linking a document on this field

and printing this field from my slice, using the slice simulator (with the page builder set up as localhost)

I get a broken link, with no data at all

This applies to all fields with data fetches I tried to set up using Slice Machine.

It was my understanding that the new fetch feature was supposed to allow fetching those fields, without having to use fetchLinks on the entire page.

At the moment, this is preventing me from rendering entire slices which depend on a single external document.

Let me know if I misunderstood something, or if it’s an incoming feature.

Thank you

[Pau]

Yes, you no longer need fetchLinks.

Could you show me an example of how the logo is supposed to appear inside the slice? From what I can tell in your screenshot, there’s a title, some text, a call-to-action button, an image with the API ID illustration, and a link to another document called logos.

What data are you trying to pull from the logos field?

One other question: when you say, “and printing this field from my slice, using the slice simulator (with the page builder set up as localhost)”, you’re actually logging that from your code, right?

Is the page returning everything empty? It would be a good idea to first run two queries in your explorer to check whether the data you need is actually present both in the Generic Logos Color document and in the document where you added the slice.

If you can share a bit more detail, that would help a lot.

[thomas.digregorio]

Yes, you no longer need fetchLinks.

Just to confirm: this applies to Slice Machine slices, not legacy ones, correct?

Could you show me an example of how the logo is supposed to appear inside the slice?

Sure, it’s a basic list of logos. Here’s what it looks like on the page

What data are you trying to pull from the logos field?

The logos field links to a logo_list document, which contains a single repeatable group ‘assets’ , which contains an image field named logo

NB: You can see it in the screenshot from Slice Machine I provided in my previous message

you’re actually logging that from your code, right?

Yes, I am

Is the page returning everything empty?

The final page is working fine, only the slice in the slice simulator returns a broken link, with no data.

• The page is still using fetchLinks, which is needs to work properly
• I also tried to create brand new documents, with new logos, link them together, and it still is a broken link
• Is this because I’m using an older version of "@nuxtjs/prismic"?
• Printing slice.primary.logos in the devtools, I get

From Slice Simulator:

From the page (with fetchLinks):

From the page (without fetchLinks):

[Ezekiel (Ezekiel Ravidat)]

Hi @thomas.digregorio, thanks for all the details provided. We've noticed you're using an older version of Nuxt, could you try upgrading it to the latest version and seeing if you get a different behavior? Here: https://www.npmjs.com/package/@nuxtjs/prismic. Thanks!

[thomas.digregorio]

Hi @Ezekiel @Pau

Thanks for looking into it!

I still have the same result after upgrading to nuxtjs/prismic v5.2.0, and prismicio/client v7.21.6.

Note:

• I tried creating a new Custom Type from Slice Machine to link to, and a new Slice to link from (to see if the issue lied in the upgrade tool somewhere), and still got the same result: a broken link
• Looking at the API Explorer, I do see the ‘data’ field, and subsequent fields in the result…

[Pau]

Hey Thomas, could you share your repository URL? You can send it to me via DM here. I’d like to run a quick test on my end.