javascript reactjs axios tanstackreact-query

React Query error when making axios request

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 component 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 component - 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" component, 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

Solution

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