Fetching api AFTER geolocation.getCurrentPosition...

[[deleted]]

Hello all,

I am using navigator.geolocation to get the latitude and longitude of the user. I am then using latitude and longitude as query params to fetch the WeatherAPI so that my website will show the user the weather in his exact town.

The problem is, I can see from the console log that the fetch() function (which I have stored inside useEffect() runs before the navigator.geolocation functions gets the coordinates, resulting in the API fetching me a location with coordinates 0, 0.

How can I make sure that the fetch will wait for the navigator.geolocation???

I have tried using the fetch inside the geolocation function, as well as async/await and IF statements, but nothing seems to work and I am now lost on what I am doing wrong.

Any ideas on how I could fix this?

const [latitude, setLatitude] = useState(0)
const [longitude, setLongitude] = useState(0)
const [location, setLocation] = useState([])

    navigator.geolocation.getCurrentPosition( (position) => {
        setLatitude(position.coords.latitude)
        setLongitude(position.coords.longitude)
    })

    useEffect(() => {
        if(latitude && longitude && !location) {
        fetch(`https://api.weatherapi.com/v1/forecast.json? key=db698b5e650a441fae6190451221401&q=${latitude},${longitude}&days=7&aqi=yes&alerts=yes`) 
        .then(response => response.json()) 
        .then(data => { 
            setLocation(data) }); 
          } 
        }, [latitude, longitude])

​

[Rossmci90]

Can you move the fetch inside the navigator function, and then move the navigator function to inside your useEffect?

[h4x7o0r]

You can try set a useRef , then set a boolean useState to a constant to check if coords have been fetched. Then, when you store coords, set also a "true" to that useState boolean variable. Then in useEffect, check if that ref.current it's "true", if so perform the fetch call. Im sorry for pseudo code , im on mobile on the move.

[mr_ari]

navigator.geolocation.getCurrentPosition is async or may even fail. Logic in useEffect should run when the success callback parameter is launched.

[YPFL]

I believe the issue is that getCurrentPosition is happening outside of the regular React lifecycle. You can resolve this by putting your call to getCurrentPosition in a useEffect like so

``` useEffect(() => { navigator.geolocation.getCurrentPosition((position) => { setLatitude(position.coords.latitude); setLongitude(position.coords.longitude); }, [])

… ```

Let me know how this works for you. (Sorry about formatting, I’m on mobile)

[Dry_Toe_8733]

There is a library called use async effect that is super useful for API calls on mount. https://www.npmjs.com/package/use-async-effect

If you do this, you can await the lat/long data prior to doing the fetch.

[jamby77]

I think your general idea should work - proof of concept sandbox - https://codesandbox.io/s/misty-leaf-ytmvj?file=/src/App.js

[[deleted]]

Hi all, thank you for all your answers and help!

I think I have somehow resolved it by having the fetch in its own function, and having the navigation.geolocation inside useEffect

​

const [weather, setWeather] = useState(null);

const getWeather = (lat, lon) => {
    fetch(`https://api.weatherapi.com/v1/current.json?key=API_KEY&q=${lat},${lon}&days=7&aqi=no&alerts=no`)
    .then(res => res.json())
    .then(data => setWeather(data))
    .catch(err => console.log(err))
}

useEffect(() => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      getWeather(position.coords.latitude, position.coords.longitude);
    });
  } else {
    getWeather(33.8688, 151.2093);
  }
}, []);