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

Question

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>

Doesn't work this way. It's possible to retrigger comp lifectcle by remounting it but that's an antipattern. Suspense isn't just a glorified loading indicator. If you need to just show a placeholder during requests, can be done with v-if. — Estus Flask, Aug 20 '22 at 21:49

score 2 · Accepted Answer · answered Mar 09 '23 at 09:29

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!

score 1 · Answer 2 · answered Jul 18 '23 at 22:51

I just had this exact problem and using the approach by Bastiaan I discovered that you could add a :key property to the Suspense component itself, and not need the timeout.

<Suspense :key="item.id">
  <template #fallback>
    Loading...
  </template>
</Suspense>

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

2 Answers2