I am having trouble with this error message every time I try to send an axios request to fetch data. 'Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call.'

I am still learning react so I'm currently unable to find the culprit through the dev tools.

This is the topmost ponent where I called the react query provider

App.js

import {QueryClient, QueryClientProvider} from '@tanstack/react-query';

function App() {
const client = new QueryClient();

return(
<div>
<QueryClientProvider client={client}>
    <ReactQuery/>
</QueryClientProvider>
</div>
);
};

This is the ponent - React Query

import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
import Navbar4 from './Navbar4';
import ReactHome from './pages/ReactHome';
import ReactProfile from './pages/ReactProfile';
import About from './pages/About';

const ReactQuery = () => {
  return (
    <div>
        <h4>React Query</h4>
        <Router>
        <Navbar4/>
            <Routes>
                <Route path='/' element={<ReactHome/>}/>
                <Route path='/reactProfile' element={<ReactProfile/>}/>
                <Route path='about' element={<About/>}/>
            </Routes>
        </Router>
    </div>
  )
}

export default ReactQuery;

And this is the "ReactHome" ponent, where I submit the request.

ReactHome.js

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

const ReactHome = () => {
    const {data} = useQuery(['cat'], () => {
        return Axios.get("/fact").then((res) => res.data);
    });

    return (
        <div>
            <p>React Home - {data.fact}</p>

        </div>
    )
}

export default ReactHome;

I am trying to use react query to make an axios request to an API. I keep getting errors whenever I do so

I am having trouble with this error message every time I try to send an axios request to fetch data. 'Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call.'

I am still learning react so I'm currently unable to find the culprit through the dev tools.

This is the topmost ponent where I called the react query provider

App.js

import {QueryClient, QueryClientProvider} from '@tanstack/react-query';

function App() {
const client = new QueryClient();

return(
<div>
<QueryClientProvider client={client}>
    <ReactQuery/>
</QueryClientProvider>
</div>
);
};

This is the ponent - React Query

import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
import Navbar4 from './Navbar4';
import ReactHome from './pages/ReactHome';
import ReactProfile from './pages/ReactProfile';
import About from './pages/About';

const ReactQuery = () => {
  return (
    <div>
        <h4>React Query</h4>
        <Router>
        <Navbar4/>
            <Routes>
                <Route path='/' element={<ReactHome/>}/>
                <Route path='/reactProfile' element={<ReactProfile/>}/>
                <Route path='about' element={<About/>}/>
            </Routes>
        </Router>
    </div>
  )
}

export default ReactQuery;

And this is the "ReactHome" ponent, where I submit the request.

ReactHome.js

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

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

    return (
        <div>
            <p>React Home - {data.fact}</p>

        </div>
    )
}

export default ReactHome;

I am trying to use react query to make an axios request to an API. I keep getting errors whenever I do so

• javascript
• reactjs
• axios
• tanstackreact-query

Share Improve this question Follow edited Nov 20, 2023 at 5:48 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Nov 20, 2023 at 5:35 Being47Being47 10111 gold badge22 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

See the API reference for useQuery() in @tanstack/react-query v5+.

The hook accepts an object with options as opposed to separate parameters.

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

See also Migrating to TanStack Query v5

useQuery and friends used to have many overloads in TypeScript - different ways how the function can be invoked. Not only this was tough to maintain, type wise, it also required a runtime check to see which type the first and the second parameter, to correctly create options.

now we only support the object format.