vue.jsvuejs3vue-suspense

Vue 3 - Use suspense again when data have to be refreshed?


I am trying to use <suspense> multiple times as a fallback while i am refreshing a component's data (using import() on a json file from the async setup()).

As stated by the documentation:

Once in a resolved state, will only revert to a pending state if the root node of the #default slot is replaced.

What's the best way to proc a new pending state of the suspense node from code and call the setup() function again? How am i supposed to replace the root node of the #default slot?

For the moment i force the replacement of the component with a :is statement switching it from a dummy value with a setTimeout delay:

function childComponentHaveToBeRefreshed{   
    cType.value = markRaw(dummyUI);
    //have to set a 1ms timeout there otherwise the replacement seems ignored
    setTimeout(()=>{ cType.value = markRaw(realUI); },1);
};


<Suspense>
   <component :is="cType"></component>
   <template #fallback>
       <Loading></Loading>
   </template>
</Suspense>

Solution

  • Not the most speedy response, but I still end up here with a Google search.

    I do not know if the following solution would work for you, but adding it just in case:

    It's explained here (Vue3): https://vuejs.org/guide/built-ins/suspense.html#loading-state

    We had an async component which could reload some data through using a watch on de (reactive) props. This results in just an async request, which is a flow suspense is not intended to be used for like Estus Flask said.

    Our final solution is this:

            <Suspense timeout="0">
                <SomeAsyncComponent :importantProp="item" :key="item.id" />
    
                <template #fallback>
                    ... loading
                </template>
            </Suspense>
    

    What this does is basicly throw the component away and rendering a new one when the :importantProp changes due to the usage of :key.

    Suspense shows the previous cached component untill the 'new' component is rendered unless the timeout is exceeded, in which case it falls back to #fallback. The timeout="0" fixes this.

    I hope this helps!