React Query) 2. React Query로 동적쿼리, 병렬 쿼리만들기 (DynamicQueries, ParallelQueries)

1. 동적 쿼리 DynamicQueries

코딩을 하다보면 특정 게시물을 찾을 때, pagenation을 할 때 등등

API를 호출할때 살짝 다른 url로 보내야 할 때가 있습니다. (엄청 많습니다)

 

그럴 때 사용하는 방법인데요

간단하게 말해서 queryKey와 queryFn을 동적으로 주는 방법입니다.

const DynamicQueryPage = ({ heroIds }) => {
  const queryResults = useQueries(
    heroIds.map((id, index) => {
      return {
        queryKey: ["super-hero", id],
        //queryKey를 배열로 두고 id값을 map으로 돌려 계속해서 다른 queryKey값을 만듭니다.
        queryFn: () => fetchSuperHeros(id),
        // id값에 맞는 queryFn
      };
    })
  );

이대로 id값에 1,2,3을 넣으면?

data에는 queryKey 값이 각 ["super-hero",1]  ["super-hero",2]  ["super-hero",3]이고 id값이 1,2,3인 값이 왔습니다.

이걸 활용하면 많은 제약이 풀려 원하는데로 data를 주고받을 수 있을 거 같습니다.

 

2. 병렬 쿼리 ParallelQueries

병렬 쿼리는 너무 간단해서 코드로 짧게 정리하겠습니다.

 

 const { data: superHeros } = useQuery("super-heros", fetchSuperHeros);

 const { data: friends } = useQuery("friends", fetchFriends);

유즈쿼리를 두번 이상 사용할때 data의 이름이 겹치지 않으려고 사용하는데

data : {사용할 이름} 을 적으면 끝입니다.

 

매우간단합니다!