Theo's Typesafe Cult•2y ago

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:

suggestion.forEach(card => {
  const responseUrl = useQuery(card.id)
  card.url = responseUrl
})

suggestion.forEach(card => {
  const responseUrl = useQuery(card.id)
  card.url = responseUrl
})

5 Replies

Tom•2y ago

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

neochromeOP•2y ago

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

Tom•2y ago

Give it a try

neochromeOP•2y ago

@Tom3 works ty

Tom•2y ago

nice glad it worked

Gaming

Programming

tRPC / React query noobish question