Uncaught runtime error when running @tanstack/react-query

Question

I am using React.js to run a simple React Query code but I am facing an error. The code:

import { useQuery } from '@tanstack/react-query';
import Axios from "axios"


export const Home = () => {
 const { data } = useQuery(["cat"],() => {
   return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
 
 });

 return (
   <h1>
     HOPE <p>{data?.fact}</p>
   </h1>
 )
}

The code above is using the public catfact api to fetch the 'fact' data and display it on screen.

The error:

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: 

https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object


useBaseQuery@http://localhost:3000/static/js/bundle.js:42203:13
useQuery@http://localhost:3000/static/js/bundle.js:42265:72
Home@http://localhost:3000/static/js/bundle.js:30:70
renderWithHooks@http://localhost:3000/static/js/bundle.js:20001:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:23285:17
beginWork@http://localhost:3000/static/js/bundle.js:24581:20
callCallback@http://localhost:3000/static/js/bundle.js:9597:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:9641:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:9698:35
beginWork$1@http://localhost:3000/static/js/bundle.js:29562:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:28810:16
workLoopSync@http://localhost:3000/static/js/bundle.js:28733:26
renderRootSync@http://localhost:3000/static/js/bundle.js:28706:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:28101:78
workLoop@http://localhost:3000/static/js/bundle.js:36113:46
flushWork@http://localhost:3000/static/js/bundle.js:36091:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:36328:25

Answer 1

You are missing the object parenthesis while calling the useQuery. Since v5 it only supports object format for given parameters.

useQuery({
  queryKey: ["cat"],
  queryFn: () => {
   return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
  },
  //...
});