useQuery 사용 시 Error: No QueryClient set, use QueryClientProvider to set one 에러 해결

!!! 프로젝트에 적용하려고 하자마자 에러가 떴다.. 

에러 발생 ..

그래서 처음 이유로는 App 을 QueryClient 로 감싸주지 않았다는 이유였는데 하지만 나는 모두 감싸준 상태였다.. 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <App />
      <ReactQueryDevtools />
    </BrowserRouter>
  </QueryClientProvider>,
);

 

왜 안될까 좌절을 하던 중 .. 이유를 깨달아버렸다 !!  바로 버전 문제였던것 .. 

 

문제 코드 

// 유저 관련 데이터 get 요청 쿼리를 저장
import { useQuery } from "react-query";
import client from "../../../config/axios";

const fetchMemberInfo = async () => {
  const token = localStorage.getItem("accessToken");
  const headers = token ? { Authorization: `Bearer ${token}` } : {};
  const response = await client.get("/api/members/me", { headers });
  return response.data;
};

export const useMemberInfoQuery = () => {
  const { isLoading, isError, data, error } = useQuery(
    "memberInfo",
    fetchMemberInfo,
  );

  return { isLoading, isError, data, error };
};

 

내 코드는 현재 이렇게 작성되어있는데 v5부터는 단일 객체를 전달하도록 변경 되었는데 나는 v4 버전대로 코드를 작성하고 있던 것이었다. 

그래서 해결 방법으로 

1. import {useQuery} from "react-query" 를 @tanstack/react-query에서 import 해주기 

2. useQuery에 단일 객체로 전달해주기 

 

이렇게 변경하니 오류 없이 잘 동작하였다 !! 

 

// 유저 관련 데이터 get 요청 쿼리를 저장
import { useQuery } from "@tanstack/react-query";
import client from "../../../config/axios";

const fetchMemberInfo = async () => {
  const token = localStorage.getItem("accessToken");
  const headers = token ? { Authorization: `Bearer ${token}` } : {};
  const response = await client.get("/api/members/me", { headers });
  return response.data;
};

export const useMemberInfoQuery = () => {
  const { isLoading, isError, data, error } = useQuery({
    queryKey: ["memberInfo"],
    queryFn: fetchMemberInfo,
  });

  return { isLoading, isError, data, error };
};

 

 

이번 오류를 통해 사용하고 있는 버전에 맞게 코드를 작성해야한다는 점을 뼈저리게 느끼게 되었다 ... !!