[react-query] useQueries로 각 id에 대해 병렬 쿼리하기

 

좋아요한 상품들을 프론트단에서 관리하기 위해, zustand 스토어에 productId를 배열로 관리하고 있다.

 

마이페이지에서, 좋아요한 상품 productList들을 위해서, zustand에서 관리하고있는 productId들의 배열을 순회하면서, 해당 productId로 getProduct 쿼리문을 수행해야한다.

 

 

useQueries

여러개의 비동기 쿼리를 동시에 실행할 수 있게 해주는 훅으로, 각각의 쿼리를 배열 형태로 받아 각 쿼리의 결과를 배열로 반환한다. 또한 각 쿼리의 로딩 상태나 에러상태 등을 개별적으로 관리할 수 있다.  동적 병렬 쿼리 작업을 위해 사용하기에, 주로 여러 개의 비동기 쿼리를 동시에 실행해야 할 때 적합하다.

 

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

https://tanstack.com/query/v4/docs/framework/react/reference/useQueries

TanStack Query Docs

 

 

 

import api from "@/apis";
import { useQueries } from "@tanstack/react-query";

export default function useQueryGetLikedProducts(productIds: number[]) {
  return useQueries({
    queries: productIds.map((productId) => ({
      queryKey: ["product", { productId }],
      queryFn: () => api.products.getProduct(productId),
      enabled: !!productId,
    })),
  });
}

 

likedProducts 배열의 각 productId에 대해 개별 쿼리를 수행하고 결과를 배열로 반환할 수 있다!

 

 

 

 

 

 

https://velog.io/@jhjung3/React-Query%EC%9D%98-useQueries-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-79d6b6k1

React Query의 useQueries 활용하기