[useRoutes, React-Query 오류 해결방법] No QueryClient set, use QueryClientProvider to set one 에러 나시는 분 보세요 !!!

문제 설명 및 코드

• 상품 상세페이지 (src > pages > products > index.tsx) 에서

  useQuery로 get 요청을 보내는 코드를 강의와 동일하게 작성하면 (useQuery를 "react-query"에서 import후 다음처럼 코드 작성시 ) 위와 같은 에러가 납니다.

• 문제 코드

import { useQuery } from "react-query";
import { QueryKeys, fetcher } from "../../queryClient";

const index = () => {
  const { data } = useQuery(QueryKeys.PRODUCTS, () =>
    fetcher({
      method: "GET",
      path: "/products",
    })
  );
  console.log(data);

  return <div>상품목록</div>;
};
export default index;

원인

• 현재 react-query가 v5로 업데이트 됨과 동시에 @tanstack/react-query로 바뀌었고, 동시에 많은 Hook (useQuery 포함)들의 사용 방법이 바뀌었습니다.

• v4의 useQuery의 경우 다음과 같은 방법으로 호출 가능했습니다.

   

  useQuery(queryKey, queryFn, options);
  useQuery(queryKey, options); // default query function 사용할 경우 query function 생략 가능
  useQuery(options);
  // v5 이전에는 queryKey만 필수 옵션 

• 그러나 일관성이 떨어지는 점, 사용될 옵션을 생성할 때 첫 번째와 두 번째 매개변수의 타입이 무엇인지 체크하기 위해 런타임 체크가 필요한 점 등의 이유로 v5부터는 단일 객체를 전달 받는 방식으로 변경되었습니다.

   

• 방식은 다음과 같습니다.

   useQuery({ queryKey, queryFn, ...options }) 

• 즉 queryKey queryFunction을 전달하는 방식이 원인이었습니다.

   

해결 방법

• useQuery를 @tanstack/react-query에서 import 한다.

• useQuery 코드를 다음과 같이 작성한다.

   

  const { data } = useQuery({
      queryKey: [QueryKeys.PRODUCTS],
      queryFn: () =>
        fetcher({
          method: "GET",
          path: "/products",
        }),
    });

참고 자료

• https://github.com/TanStack/query/discussions/4252

  의 remove overloads 부분

• https://tanstack.com/query/latest/docs/react/quick-start 의 코드 부분

• https://tanstack.com/query/v5/docs/react/reference/useQuery

처음엔 버전 안 맞아서 짜증났었는데 오히려 공식문서를 보며 공부할 수 있는 기회였던 것 같아 재밌었습니다 ㅎㅎ
좋은 강의 감사합니다 😃