Slices not appearing in correct order

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

Hi Victor,

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

Thanks.

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.

1 Like

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.

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.

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