Uncaught runtime error when running @tanstack/react-query

[Kishlay-notabot]

Describe the bug

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

Your minimal, reproducible example

any react app involving react query

Steps to reproduce

1. import react query
2. fetch data
3. run code with npm start
4. the error flashes for a splitsecond on the localhost webpage, reload multiple times to see it

Expected behavior

Data being fetched and displayed

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows, Linux

Tanstack Query adapter

react-query

TanStack Query version

v5.14.1

TypeScript version

No response

Additional context

No response

[TkDodo]

I mean, how much better can an error message be? Please read it. There's even a link in there to the docs, did you go there??

[Kishlay-notabot]

Sorry for creating the issue here but i indeed went to the docs but I guess its above my knowledge level right now, I'm fairly new to react and query.

[Kishlay-notabot]

@TkDodo so do i have to run the codemod command?

[TkDodo]

You only need the codemods when upgrading from v4. Please start by reading the docs and maybe use TypeScript. The correct syntax is:

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

[Kishlay-notabot]

Okay so the codemods are used to mass-convert the code if someone is using them on a bigger scale?
Thankyou for your time, I'll try the code given by you

[Kishlay-notabot]

The error got solved, thanks a lot!