[react query]타입에 따라 다른 데이터 refetch 하기

보통 카테고리에 따라 데이터를 필터링하여 fetch할때가 있는데 모든 카테고리 타입마다 useQuery를 만들어 데이터를 fethc하는것은 너무 비요율 적이다.

 

따라서 오늘은 타입에 따라 데이터를 refetch할 때 다른데이터를 fetch하는 방법을 써 보겠다

 

결론부터 말하자면 useQuery에 queryKey를 다르게 주면 해결된다.

 

기존 코드

  const { data, isError, isLoading, refetch } = useQuery({
    queryKey: ['queryKey'],
    queryFn: () => fetchData(),
  });

 

이코드에서 배열로 주어진 queryKey에 두면쨰 요소로 변수를 넘겨주면 된다. 

 const [stateType, setStateType] = useState()
  
  const { data, isError, isLoading, refetch } = useQuery({
    queryKey: ['queryKey', stateType],
    queryFn: () => fetchData(stateType),
  });

이렇게 useState로 queryKey를 주고 queryFn에 인자로 해당 state를 넘겨 준다 

 

setState로 state를 변경할 때마다 useQuery는 refetch되고 변경한 state를 가지고 fetch함수에서 조건문으로 필터링을 하면 하나의 함수에서 조건에 따라 데이터를 fetch할 수 있다.