NuxtN
Nuxt•2y ago
Phillip

await useAsyncData in setup doesn't block navigation

I want to wait until navigating to the next page until the store data has been fetched and set.
I'm using Nuxt 3 + Supabase + Pinia

My approach in provider.vue (where user gets redirected after signing in/up to set cookies etc.) 
// redirect once user has been set
const user = useSupabaseUser()
watch(user, async () => {
    if (user.value) {
        await useSteps().handleNavigateToNextStep()
    }
}, { immediate: true })

app.vue
: fetch store data. I'm hoping to block navigation by using await useAsyncData
const user = useSupabaseUser()
await useAsyncData('userStoreData', async () => {
  if (user.value) {
    await useUserStore().fetchInitialData()
  }
}, { watch: [user] })


my store (reduced data for demonstration purpose) 
export const useUserStore = defineStore({
    id: 'UserStore',
    state: () => ({
        company: null as Tables<'company'> | null,
    }),
    actions: {
        async fetchInitialData() {
            const [companyData] = await Promise.all([
                useCompany().getCompany(),
            ])
            this.company = companyData;
        },
    }
})

... however, after the provider.vue redirects me, this value is undefined in one of my composables:
const { company } = storeToRefs(useUserStore())

How can I make the application wait until the store has been set?
Was this page helpful?