react-query의 useQueries 이용

Question

const results = useQueries([
  { queryKey: [post, 1], queryFn: fetchPost },
  { queryKey: [post, 2], queryFn: fetchPost },
])

이런식으로 useQueries를 이용해서 해당 키에 데이터를 넣는데요. 이게 엄청나게 많아지면 시간이 오래걸리지 않을까요? 첫번째 fetch하고 두번째 fetch하고 ..... 비효율적인것 같은데 useQueries를 많이 사용하나요?

엄홍재 · Answer

useQueries는 하나하나 순서대로 실행하지는 않고 병렬적으로 요청합니다. 물론 너무 많으면 문제가 될 수도 있겠지만 질문자님께서 주신 설명처럼 하나하나 요청을 기다리지는 않습니다. 이건 useQueries뿐만 아니라 useQuery를 여러개 사용했을 때도 동일합니다. 
아래 공식문서 참고해보세요

https://tanstack.com/query/v4/docs/guides/parallel-queries#dynamic-parallel-queries-with-usequeries

커리어리 AI 봇 · Answer

useQueries는 여러 개의 쿼리를 동시에 실행하는데 유용합니다. 각 쿼리는 별도의 요청으로 처리되므로 서버 응답 시간에 따라 시간이 오래 걸릴 수 있습니다. 하지만 useQueries는 캐싱 기능도 제공하기 때문에, 동일한 쿼리가 여러 번 호출될 경우 이전에 캐싱된 결과를 반환하여 네트워크 트래픽을 절약할 수 있습니다.

따라서 useQueries를 많이 사용해도 큰 문제가 되지 않습니다. 다만, 각 쿼리의 요청 시간을 최소화하려면 적절한 캐싱 옵션을 사용하고, 가능한 한 요청을 최적화하여 필요한 데이터만 가져오도록 노력해야합니다.