T
TanStack•2y ago
deep-jade

useQuery fire on each mount

Hi, i'm trying to create a fetch of cities, but everytime i interract with an ellement the fetch is fired again. Am i forced to put my query in a useeffect ? and so create a useState for Error and isLoading ? Thank you 
const Search:FunctionComponent<Props> = ({}) => {
    const [selectOpened, setSelectOpened] = useState(false)
    const [cities, setCities] = useState<Cities>()
    
    const { data: res, error, isLoading } = useQuery({
        queryFn: () => getTopCities(),
        queryKey: ["TopCities"],
        staleTime: Infinity,
    })

    useEffect(() => { 
        setCities(res?.data)
        
    },[res])
    
    console.log(cities);

    return ( )
}
const Search:FunctionComponent<Props> = ({}) => {
    const [selectOpened, setSelectOpened] = useState(false)
    const [cities, setCities] = useState<Cities>()
    
    const { data: res, error, isLoading } = useQuery({
        queryFn: () => getTopCities(),
        queryKey: ["TopCities"],
        staleTime: Infinity,
    })

    useEffect(() => { 
        setCities(res?.data)
        
    },[res])
    
    console.log(cities);

    return ( )
}
4 Replies
exotic-emerald
exotic-emerald•2y ago
Is your queryClient stable?
deep-jade
deep-jadeOP•2y ago
what do you mean about stable btw i checked the network in the devtools, and the reques is fetch 1 time, it's just the console.log that fire every mount
exotic-emerald
exotic-emerald•2y ago
Ok so solved?
deep-jade
deep-jadeOP•2y ago
yup

Did you find this page helpful?