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("/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: 




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

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./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

• javascript
• reactjs
• node.js
• react-query
• tanstackreact-query

Share Improve this question Follow asked Dec 19, 2023 at 10:34 Active-leopard-58a51dActive-leopard-58a51d 3711 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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);
  },
  //...
});

i have the same issue as you i changed the code to this and i changed axios import

import axios from 'axios';

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

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

});