deep-jade

how to pass arguments to refetch fuction of useQuerry

I have function in my react native app which gets user latitude and longitude. Executing this function using useEffect. If i get location I want to fetch the data based on location( latitude and longitude ) otherwise want to show fallback component. i disable the query to run automatically by making enable=false. Now how should I pass the location with refetch function to fetch the data.

7 Replies

plain-purple•15mo ago

that's not how it works: https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch

React Query FAQs

Answering the most frequently asked React Query questions

deep-jadeOP•15mo ago

So what could be better approach instead of storing location in a state. As useEffect will run every time when components mount and lat long update will cause refetch.

plain-purple•15mo ago

not sure what useEffect has to do here, not even sure what you are trying to achieve. Can you please describe your problem without jumping to conclusions like "executing in useEffect" or "passing params to refetch". you're likely going down the wrong path

deep-jadeOP•15mo ago

const baseUrl = 'https://api.aladhan.com/v1/timings' 

export default function Home() {
  
  const insets = useSafeAreaInsets()
  const [location, setLocation] = useState<{} | null >(null)

  const fetchPrayerTime = async ()=> {
    const currentDay = new Date().getDate()
    const currentMonth = new Date().getMonth() + 1
    const currentYear = new Date().getFullYear()
    const today = `${currentDay}-${currentMonth}-${currentYear}`
  
    try {
      const response = await axios.get(`${baseUrl}/${today}?latitude=${location?.lat}&longitude=${location?.lon}`)
      return response?.data
    } catch (error) {
      console.log('error', error)
    }
  }

  const {data, isLoading, isError, refetch} = useQuery({
    queryKey:['fetchPrayerTime', location?.lat, location?.lon], 
    queryFn:fetchPrayerTime, 
    enabled:false
  })

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log('Permission to access location was denied');
      }
      let loca = await Location.getCurrentPositionAsync({});
      setLocation({lat:loca?.coords?.latitude, lon:loca?.coords?.longitude})
      if (location) {
        refetch()
      }
    })();
  }, []);


    


  return (
   // My code........
  );
}

const baseUrl = 'https://api.aladhan.com/v1/timings' 

export default function Home() {
  
  const insets = useSafeAreaInsets()
  const [location, setLocation] = useState<{} | null >(null)

  const fetchPrayerTime = async ()=> {
    const currentDay = new Date().getDate()
    const currentMonth = new Date().getMonth() + 1
    const currentYear = new Date().getFullYear()
    const today = `${currentDay}-${currentMonth}-${currentYear}`
  
    try {
      const response = await axios.get(`${baseUrl}/${today}?latitude=${location?.lat}&longitude=${location?.lon}`)
      return response?.data
    } catch (error) {
      console.log('error', error)
    }
  }

  const {data, isLoading, isError, refetch} = useQuery({
    queryKey:['fetchPrayerTime', location?.lat, location?.lon], 
    queryFn:fetchPrayerTime, 
    enabled:false
  })

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log('Permission to access location was denied');
      }
      let loca = await Location.getCurrentPositionAsync({});
      setLocation({lat:loca?.coords?.latitude, lon:loca?.coords?.longitude})
      if (location) {
        refetch()
      }
    })();
  }, []);


    


  return (
   // My code........
  );
}

sir here in this component, I am asking user location permission, inside useEffect, so based on status I want to fetch data. as of now I put the location in a state after usr granted permission. My url endpoint requires latitude and longitude.

plain-purple•15mo ago

Location.requestForegroundPermissionsAsync can be a query too since it's async, and then you can just compose dependent queries

deep-jadeOP•15mo ago

nice, an example will be perfect sir, please

plain-purple•15mo ago

https://tanstack.com/query/v5/docs/framework/react/guides/dependent-queries

Dependent Queries | TanStack Query React Docs

useQuery dependent Query Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:

Gaming

Programming

how to pass arguments to refetch fuction of useQuerry

Did you find this page helpful?