cache function provided in 'solid-router' doesn't work properly when used with Promise.allSettled .
async function populateData(){
const [p1, p2] = await Promise.allSettled([getNewsList(), getAnnouncements()])
}
const getNewsList = cache(async()=> await axiosCustom.get(
/news))
const getAnnouncements = cache(async() => await axiosCustom.get('/announcements'))
when function 'populateData' used as load function, value of p1 and p2 is same.
is there any way to solve this?5 Replies
Can you test what happens when you just call getNewsList and getAnnoucements directly in the load function ?
You’d probably need to createAsync when you call the functions in the components.
if i call them individually at different route load functions it works. if i remove the cache wrapper in above example it also works. if i use fetch api in above example it fails so it's not axios problem for sure.
Just call the functions in the load function. No need to promise.all
even if I make separate calls one after another in "populateData" function, I get the same response. I think another call can't be made using cache function until the Cached data expires. Additionally , why shouldn't one use promise.all ? it's a good feature.
You don’t need it.
The load function usually only runs when you hover a link to that page.
No need to await the data or use a promise.allSettled.
You. Can just do
load: () =>{
getAnnouncements();
getNewsList();
}
The load function just executes the provided functions to populate the cache.
In your components you use createAsync which grabs the data from the cache if available.
And it dedupes all calls of cached functions.
All createAsync are fetched parallel, no waterfalls.
So you don’t need promise.allSettled as well.
Solid does everything in an optimal way already.
Thinking about it. It probably uses something like that under the hood.