Elegant ways to handle variable useQuery/useMutation calls?
I have a useMutation call that runs once per object in a list. I don't want to run it once for the whole list*. This list is stored for each user in a DB though, and when the page initially loads it hasn't been fetched yet (so the list is undefined). Once it does load, useMutation() runs, and react rightfully tells me that the number hooks that run changed.
I've been using a pretty hacky solution to get around this - hard coding an initial list with the max number of items that i would expect to be in it before the list loads (with just undefined or dummy objects), and once the actual list from the DB loads, padding it to maintain the same length (so useMutation is called the same number of times).
This feels incredibly hack-y and wrong. How should I be handling this? Maybe the answer is "don't use trpc - it just doesn't support this well atm"?
*This is because latencies can vary significantly for the objects, 10-45 seconds, and i don't want the user to just stare at a static screen for up to 45 seconds and then have everything appear
2 Replies
you have a enabled property on the mutation, you set something like
And it will not run until the users are fetched
And if I understood the problem correctly, I would solve it like so:
- The mutation is disabled untill the users are loaded
- fetch users and create an array of userId's or w/e you need to fetch that other data
- when you have that array use it to send a mutation which will do a single query to fetch w/e you need
- connect the new data to the user's objects
yes that would fix it, but I want to make one API call per object in the list. This is because latencies can very wildy (10-45 seconds - these are LLM api calls) and I want the user to be able to look at the results as they load.
any thoughts on how i should solve it given that a list of n objects results in n api calls?