T
TanStack•3y ago
harsh-harlequin

Data isn't being passed into function correctly

Super weird bug, I use a QueryFN to execute an API call. This is something I've done a million times before (in fact immediately below the code I am about to share, I run another few API calls that use extremely similar syntax. I pass in two variables into the function, one called "appUrl" and another called "isApp" -- when I console.log them, they look how I want them to look... isApp is a bool that gets set correctly, appUrl is indicitive of what I want it to be too... then I call useQuery... const info = useQuery(['info'], ()=>getInfo(appUrl, isApp), {onSuccess:(data)=> setResID(data.data[0].id)}) Here are the clientside logs for both isApp and appUrl. I log them immediately ABOVE useQuery. 
[Log] true

[Log] order.[redacted].com
[Log] true

[Log] order.[redacted].com
It calls the following function 
export const getInfo = (appUrl, isApp) => api.post(process.env.NEXT_PUBLIC_PROTOCOL+`://${window.location.host}/api/restaurants/`, {url: isApp ? appUrl : window.location.host}).then(res=> {
    res.data
    console.log(isApp)
    console.log(appUrl)
})
export const getInfo = (appUrl, isApp) => api.post(process.env.NEXT_PUBLIC_PROTOCOL+`://${window.location.host}/api/restaurants/`, {url: isApp ? appUrl : window.location.host}).then(res=> {
    res.data
    console.log(isApp)
    console.log(appUrl)
})
isApp is undefined. It's not undefined when I pass it in. appUrl logs this out: [Log] {queryKey: ["info"], pageParam: undefined, meta: undefined} What the heck is happening here? This makes absolutely zero sense. My app is made up of 30+ API calls... I use this syntax time after time with no issues... please help! Thanks in advance!
4 Replies
absent-sapphire
absent-sapphire•3y ago
Which version of react-query are you using? Do you get the same with: 
useQuery({
  queryKey:['info'], 
  queryFn: () => getInfo(appUrl, isApp), 
  onSuccess: data => setResID(data.data[0].id)
})
useQuery({
  queryKey:['info'], 
  queryFn: () => getInfo(appUrl, isApp), 
  onSuccess: data => setResID(data.data[0].id)
})
adverse-sapphire
adverse-sapphire•3y ago
please show a reproduction, it's really hard to tell otherwise. off the top of my head: - variables you use inside the queryFn need to go into the queryKey - onSuccess is deprecated and will be removed in the next major version
harsh-harlequin
harsh-harlequinOP•3y ago
Putting the variables inside of the queryKey worked -- not entirely sure why... I don't have that for the other functions where I do very similar things. Thanks!
adverse-sapphire
adverse-sapphire•3y ago
not entirely sure why
because variables you're using inside the queryFunction are dependencies, and the queryKey is like the dependency array. we have a lint rule for that: https://tanstack.com/query/v4/docs/react/eslint/exhaustive-deps
Exhaustive dependencies for query keys | TanStack Query Docs
Query keys should be seen like a dependency array to your query function: Every variable that is used inside the queryFn should be added to the query key. This makes sure that queries are cached independently and that queries are refetched automatically when the variables changes.

Did you find this page helpful?