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
Was this page helpful?