Slices not appearing in correct order

Developing with Prismic
,
1

I have a site where the slices most of the time appear in the correct order but sometimes it appear in wrong order when I update the page and go back and forth from pages.
I dont know how this can happen. I can see thou that the order when it doesnt work seems to be in the same order "slices/index.ts". Dont know if that helps.

The project is built with Nuxt 3 + Prismic & served with Netlify.

Ty

3

Hi Victor,

I've seen this previously, do any of these solutions help?

Thanks.

4

We solved it by wrapping our uid in a ref and watching that ref in the useAsyncData fn. Like this.

const uid = ref(useUid());
const lang = useLang();
const customType = useCustomType();
const { client } = usePrismic();

const { data: doc, refresh } = await useAsyncData(
  uid.value,
  async () => {
    const doc = await client.getByUID(customType, uid.value, { lang });

    return doc;
  },
  {
    watch: [uid],
  }
);

Little bit changed code but thats how we did it.

2 Likes
5

OK, I'm not sure why it's doing this; I'll pass this to the team. Thanks for reporting this and showing your workaround.

7

I think the useAsyncData fn is caching its results so it does not rerender when you fetch new data thats also why they added watchers (i guess) into that function.

8

Is there any way you can describe this issue on the Nuxt projects Github?

It would really help to get the team's eyes on this so they can think of a fix.

1 Like