DesiredName
useAsyncData in composables that uses each other
Hi, everyone! 🙂
I have a repo here: https://gitlab.com/HIV/budgettracker
The description:
I have a composable
useTransactionGroups (B) and useTransactions (A)
Both of them are supposed to run server-side on initial load.
(B) uses (A) to compute groups property.
(B) is used on transactions page and the (A) is used in the TFilter component.
the transactions data is requested with useAsyncData that (as per docs) is supposed to use useState for the data it fetches to cache it.
The problem:
Whenever the app starts, it issues 2 requests to transactions API endpoint from (A), because:
TFilter -> (A): filters
Transactions (page) -> (B): groups -> (A): transactions
What did I try:
1. use pinia store to join (A) + (B) data inside in one shot;
2. use closures in (A) and (B) to not to create two separate instances of (A);
3. use useSatate to manage data inside (A) and (B)
If I use only (B) inside transactions page and pass filter and groups as props to the corresponding components, everything works great.
The question:
What are the options to 'tear apart' single composable with useAsyncData inside. I think I don't understand something and maybe composables are not even designed to work that way.
Thank you!6 replies