Revalidate Path and Suspense Fallback
Unanswered
Knopper gall posted this in #help-forum
Knopper gallOP
Hello,
I am trying to find the best way to fallback on my skeleton loaders i have defined in my Suspense component whenever I call revalidatePath in a server action.
Here is my flow. I have a component that shows bank account info and a modal button that can remove the bank info. On remove I call a server action that revalidates the path which will then show the zero state after a successful api call to get bank info which is now empty in the DB.
I want the loading state to appear when it refetches the data again server side. Is there a way I can invalidate the data and have Suspense fallback on the loading component ?
I am trying to find the best way to fallback on my skeleton loaders i have defined in my Suspense component whenever I call revalidatePath in a server action.
Here is my flow. I have a component that shows bank account info and a modal button that can remove the bank info. On remove I call a server action that revalidates the path which will then show the zero state after a successful api call to get bank info which is now empty in the DB.
I want the loading state to appear when it refetches the data again server side. Is there a way I can invalidate the data and have Suspense fallback on the loading component ?
<Suspense fallback={<Skeleton />}>
<BankSummary />
</Suspense>const BankSummary = async () => {
const bankInfo = await api.payableEntities.getExternalAccount.query();
return <div>{bankInfo.name} <button onClick={() => removeBank().then(revalidatePath('/')}> Remove? </button></div>
}3 Replies
Vespid wasp
@Catlam I've got very similar problem. Did you manage to solve that?
For me revalidation works correctly only for the first time after initial render, but each another call firstly refetches the data, and AFTER successful fetch it quickly fires the suspense, so you barely notice the suspense fallback... It does not make sense. Should I write client side stuff to handle spinners etc.?
For me revalidation works correctly only for the first time after initial render, but each another call firstly refetches the data, and AFTER successful fetch it quickly fires the suspense, so you barely notice the suspense fallback... It does not make sense. Should I write client side stuff to handle spinners etc.?
@Vespid wasp <@143102727990280192>m I've got very similar problem. Did you manage to solve that?
For me revalidation works correctly only for the first time after initial render, but each another call firstly refetches the data, and AFTER successful fetch it quickly fires the suspense, so you barely notice the suspense fallback... It does not make sense. Should I write client side stuff to handle spinners etc.?
Common carp
Did you find a solution for this? 👀 I am also refetching data and revalidating the path.. data shows up instantly after fetching completes but there is no fallback in between. i would love to just have the suspense fallback show again in that time
Vespid wasp
@Common carp Well, somehow I managed, but I'm not sure what exactly I can advise. The biggest change I've done was to make Suspense correctly, as in the beginning I did it wrong (I've ensured that the suspended component is a server async component). I've also switched to revalidating tag instead of path. I've also put the revalidateTag into a shared server action that I use from client side server calls (mostly mutations). Not sure which of these actions was the most successful, but maybe something could help you.