Cannot get Async data to work with Pinia + PreFetch

[gregbengis]

Hi

I've been using Vuex until recently on a number of projects, and with PreFetch, I am able to dispatch an action in my store, which calls a promise, before setting the data. The PreFetched data would then display in my components as expected.

I'm now using Pinia with a new project, which until now has been a breeze, but I am implementing the SSR side of things now, and I cannot get Async data to populate my store. It makes sense I guess - I am not sure how it magically worked with Vuex, but it seems Vuex knew that there were outstanding requests which it had to wait for, in order to render the page correctly.

export const useSiytDataStore = defineStore('siteData', { state: () => ({ siteCopy_: {loading:true} }), getters: { siteCopy: (state) => state.siteCopy_ },

the correct value to the getter 'siteCopy' is set perfectly outside of SSR.

However with SSR, the value remains {loading:true}

I am trying to initialize the store in 2 ways:

1. Inside the store (called by preFetch)
   actions: { fetchData() { siteDataService.getSiteCopy().then(r=>{ console.log('this code gets reached and is printed in server side console. Log the correct data fetched from the server.'); this.siteCopy_ = r.data }) },
2. Inside preFetch
   preFetch({ store }) { const siteDataStore = useSiteDataStore(store); siteDataService.getSiteCopy().then(r => { console.log('this code gets reached too, and logs the correct data too'); siteDataStore.setData(r.data); }); siteDataStore.fetchData()

But I can ONLY get my getter value to update if I set it synchronously in Pinia:
fetchData() { this.siteCopy_ = [123,456] },

What am I doing wrong?

[pylvr]

did u found a solution for this ?

[gregbengis]

nope, unfortunately I had to revert back to vuex

[yusufkandemir]

preFetch thinks your code is synchronous because you are not returning any Promise, or made it an async function and await the calls inside it. You could do this instead:

Inside the store:

actions: {
  async fetchData() {
    const { data } = await siteDataService.getSiteCopy();
    this.siteCopy_ = data;
  },
},

Inside preFetch:

async preFetch({ store }) {
  const siteDataStore = useSiteDataStore(store);
  await siteDataStore.fetchData();
}

It can't be related to Vuex, it's how asynchronous stuff works in JS. When using Vuex, you were probably returning the Promises, so it was working.

[DominicLee]

Thanks from 2024 for this solution!