[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
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์ ๋ํด ๊ฐ๋ณ ์ฟผ๋ฆฌ๋ฅผ ์ํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํํ ์ ์๋ค!