tRPC / React query noobish question
Hi, I have this Query:
const { data: cardSetQuery, refetch: cardSetQueryRefetch } =
api.example.getCardSet.useQuery(
{
text: data?.id || "",
},
{
enabled: false,
}
);
Is there a way to do something like this where I want to update MULTIPLE objects with my query result?
I essentilly have a dropdown and I want to add icons to the text, but for that I need to query to URLs from another TRPC call.. how do I merge those 2 together?
Ideally I would need something like this:
5 Replies
Why not just return all the info you need from a single endpoint?
But to shower your question you could have 2 useQuery() calls and then in your component you can check when both of them are done loading and combine the results in js
Oh I see. Yeah. The way you have things set up is commonly called the n + 1 problem
You do 1 query to get a list of results and then a separate query for everything in the list
The react query way to do this would be to make a new component for each item you’re trying to render and then do a use Query() at the top of each of the inner components
But generally it is considered better practice to just get everything you need in a single query like I originally said
Because otherwise you do a ton of network requests and have separate loading states for each one and you have to deal with questions like “what if one fails” “what if they load out of order”, “what if the server rate limits me for making so many requests so quickly” etc
I can do that technically but not in all cases
yeah makes sense
I think I will go with that approach
I should not have any issues I suppose
Give it a try
@Tom3 works ty
nice
glad it worked