As a newcomer to javascript and vue, I am delving into dynamic routes and attempting to pass data from my local API (Graphql via Apollo) to the Openweathermap API URL upon page load. However, I am facing an issue where the openweather API returns a 400 error because the URL is being passed an empty value (this.city) unless I manually refresh the page. Unfortunately, even after refreshing, the problem persists intermittently. I am struggling to find a solution on how to retrieve the city name value from my local API before axios or fetch attempts to access any data from the openweather API.
To sum it up: The variable this.city is empty when passed to the axios URL, resulting in a 400 error response from the API unless the page is refreshed (which is not always effective).
Here is a snippet of my code:
<script>
import venueQuery from '~/apollo/queries/venue/venue'
export default {
data() {
return {
loading: 0,
venues: [],
city: '',
sunset: '',
currentTemp: ''
}
},
apollo: {
$loadingKey: 'loading',
venues: {
prefetch: true,
query: venueQuery,
variables() {
return {
slug: this.$route.params.slug
}
},
result(result) {
return this.city = result.data.venues[0].temperature
}
}
},
created() {
this.getWeatherInfo()
},
methods: {
getWeatherInfo() {
this.$axios
.$get(`${process.env.WEATHER_BASEAPI}${this.city}${process.env.WEATHER_KEY}`).then(data => {
this.currentTemp = Math.floor(data.main.temp - 273.15);
this.sunset = new Date(data.sys.sunset * 1000).toLocaleTimeString("en-GB").slice(0, 5)
})
}
}
}
</script>
I would greatly appreciate any assistance with this issue.