리액트 쿼리 useQuery에서 데이터가 잘못 나오는 부분

Question

하나의 컴포넌트에서 두개의 useQuery를 사용중입니다.
각각의 useQuery는 다른 쿼리키를 갖고 있으며 하나는 상품정보, 하나는 카테고리 정보를 불러옵니다.
그런데 간혹 상품정보 쿼리에서 카테고리 정보를 불러올때가 있습니다.

코드를 일부 보여드리겠습니다.
// 상품정보 불러오는 코드(커스텀 훅)
export default function useGetProduct(productId: number) {
  return useQuery([getProduct, productId], () => getProduct(productId), {
    onError: (err) => alert(err),
  });
}
// 카테고리 정보 불러오는 코드(커스텀 훅)
export default function useGetCountByCategory() {
  return useQuery([getCountByCategory], getCountByCategory, {
    select: (res) => res.result.productCountsByCategory,
  });
}

두 코드에서 쿼리키가 완전 다르다고 생각합니다.
그런데 에러가 나서 네트워크 탭을 보면 상품정보 request의 response에 
카테고리 정보 response가 담겨옵니다(백엔드 쪽은 스웨거를 통해 여러번 시도했는데 동일하게 데이터가 오고 있구요).

어떤 부분이 문제일까요!?
리액트 쿼리가 아주 애를 먹이네요..! 
지식을 나눠주신다면 감사하겠습니다.

백승훈 · Accepted Answer

React-Query Dev-tool를 사용하여 특정 상황에서 어떤 쿼리키가 갱신되고 활성화되는지 확인 해 보시는게 좋을 것 같습니다. 혹은 리액트 쿼리 버전이 최신이라면 문법이 최근 조금 변경되었습니다.

useQuery({ queryKey: [todos], queryFn: getTodos })

다음과 같이 queryKey 혹은 queryFn을 넣어주셔야 정상 동작합니다.

혹은 queryClient를 다시 생성하지 않는지 확인 해 보시는것도 좋을 것 같습니다.
app.js 의 최상단에서

const queryClient = new QueryClient()

쿼리클라이언트는 한번만 new로 생성되어야 하며 이후 재사용 시에는

const queryClient = useQueryClient()

다음과 같은 문법을 통해 불러와야 합니다. new로 다시 생성하는 부분이 있으면 변경해주셔야 합니다. 👍