[React]Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions.Please use the error stack to find the culprit call. More info here:

 

Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions.
Please use the error stack to find the culprit call. 
More info here:

 

react-query 공부하는데 진짜..

강사님 보면서 따라하는데 버전이 다른건지 계속 문제가 생겨서

몇시간을 버리다가 드디어 문제를 해결함..

 

//   let result =  useQuery('useReactQuery',()=>{
//  return axios.get('https://codingapple1.github.io/userdata.json')
//  .then((a)=>{ return a.data});
// })

// const {data,isLoading} = useQuery('post',fetchPosts);
//const { data: posts, isInitialLoading } = useQuery(['posts'], () => axios.get("https://codingapple1.github.io/userdata.json"));

https://stackoverflow.com/questions/77684535/uncaught-runtime-error-when-running-tanstack-react-query

Uncaught runtime error when running @tanstack/react-query

 

위와 같이 다양한 방식으로 코드를 작성해도 계속 위와 같은 문제가 생겼는데

나와 똑같은 현상을 가진 사람이 있어서 다음과 같이 문제를 해결했다

 

v5부터는 지정된 매개 변수에 대한 개체 형식만 지원합니다.

라고 답변이 적혀있어서 위와 같은 형식으로 코드를 재구성 했다

 

import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import {
  useQuery,
  useQueryClient,
  useQueryErrorResetBoundary,
} from "@tanstack/react-query";

const MyComponent = () => {
  const { data, error, isError } = useQuery({
    queryKey: ["myQueryKey"],
    queryFn: async () => {
      const res = await axios.get(
        "https://codingapple1.github.io/userdata.json"
      );
      return res.data;
    },
  });
  if (isError) {
    console.error("요청 실패:", error);
    // 에러 처리 로직 작성
  } else if (data) {
    return (
      <div>
        <h2>{data.name}</h2>
        <h3>{data.email}</h3>
      </div>
    );
  }
};
function App() {
  return (
    <div className="App">
      <MyComponent></MyComponent>
    </div>
  );
}

export default App;

https://tanstack.com/query/v4/docs/react/quick-start

공식 홈페이지에도 적혀있긴했는데 어떻게 작성을 해야할지 몰라서 쩔쩔 매다가

 

어떻게 해결하긴함...