Call external fetch function in react component - reactjs

Question

I have outsourced a fetch function into lib/cityData.js
const fetch = require('cross-fetch');
const dev = process.env.NODE_ENV !== 'production';
const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';
const fetchCityData = (city) => {
const options = {
method: `POST`,
};
fetch(`${server}/api/weather?city=${city}`, options)
.then((response) => {
if(response.ok){
return response.json().then(data => console.log(data))
}
throw new Error('Api is not available')
})
.catch(error => {
console.error('Error fetching data in city data: ', error)
})
}
//fetchCityData('London')
module.exports.fetchCityData = fetchCityData;
Data is an object, so fetchCityData('London') returns
{
location: {
name: 'London',
region: 'City of London, Greater London',
country: 'United Kingdom',
lat: 51.52,
lon: -0.11,
tz_id: 'Europe/London',
localtime_epoch: 1632394483,
localtime: '2021-09-23 11:54'
},
current: {
last_updated_epoch: 1632393900,
last_updated: '2021-09-23 11:45',
temp_c: 18,
temp_f: 64.4,
is_day: 1,
condition: {
text: 'Partly cloudy',
icon: '//cdn.weatherapi.com/weather/64x64/day/116.png',
code: 1003
},
wind_mph: 13.6,
wind_kph: 22,
wind_degree: 250,
wind_dir: 'WSW',
pressure_mb: 1020,
pressure_in: 30.12,
precip_mm: 0,
precip_in: 0,
humidity: 73,
cloud: 75,
feelslike_c: 18,
feelslike_f: 64.4,
vis_km: 10,
vis_miles: 6,
uv: 4,
gust_mph: 11.2,
gust_kph: 18
}
}
So, now I have a component and this needs this data. The process is as follows
In input user types city
Auto select gets fired
onSelect city is set (setCity(city))
This happens in the component SearchBar.js. Then city is being passed to the component ForecastButtons.js
This component takes the city and then onClick it should call my function above fetchCityData.js and return current temperature for the selected city. Before my fetchCityData function was part of ForecastButtons component, but I needed to outsource it, so now, of course the code is broken:
import React, { useState } from 'react';
import fetchCityData from '../lib/cityData'
export const ForecastButtons = ({ city }) => {
const [payload, setPayload] = useState(null)
const [error, setError] = useState(null)
const [loading, setLoading] = useState(true)
const location = payload?.location?.name;
const currentTemp = payload?.current?.temp_c;
return(
<div className="sm:col-span-2">
<p className="block text-sm font-medium text-gray-700">Select forecast</p>
<button onClick={fetchCityData} className="mt-1 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button'>
Today
</button>
<p key={city?.location?.id} className='my-5'>
{ location ? `Current weather in ${location} is ${currentTemp} degrees ` : 'Please search for city to see current weather'}
</p>
</div>
)
}
setPayload in this component was called after fetch returned json. Now the payload is basically my data. Should I import the function somehow and setPayload(data)? I am new to react, this is way to complex for me. How do I use fetchCityData, setPayload and onClick in the button of my component still get the weather?

Answer 1

So I did just quick sketch how it could be. As I sad I transformed fetchCityData to hook usefetchCityData which return [data, loading, error]. We call that hook providing city. Inside hook when city changing useEffect calls server, updates all states, and returns [data, loading, error]. I am using my fake data and timeout to imitate network connection, also you can get fake error from server.
hooks.js:
// import axios from "axios";
import React from "react";
const useFetchCityData = (city) => {
const [data, setData] = React.useState();
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(false);
React.useEffect(() => {
const dev = process.env.NODE_ENV !== "production";
const server = dev
? "http://localhost:3000"
: "https://your_deployment.server.com";
setData(undefined);
setLoading(true);
setError(false);
const options = {
method: `POST`,
};
// axios(`${server}/api/weather?city=${city}`, options)
new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.2) {
resolve(`data from server for ${city}`);
}
reject();
}, 2000);
})
.then((data) => {
setData(data);
setLoading(false);
})
.catch((error) => {
console.error("Error fetching data in city data: ", error);
setLoading(false);
setError(true);
});
}, [city]);
return [data, loading, error];
};
export { useFetchCityData };
App.js:
import React from "react";
import { useFetchCityData } from "./hooks";
const App = () => {
const [city, setCity] = React.useState("London");
const [data, loading, error] = useFetchCityData(city);
return (
<div>
<div>data: {data}</div>
<div>loading: {loading.toString()}</div>
<div>error: {error.toString()}</div>
</div>
);
};
export default App;

Answer 2

Another solution would simply be:
cityData.js
const fetch = require('cross-fetch');
const dev = process.env.NODE_ENV !== 'production';
const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';
const fetchCityData = (city) => {
const options = {
method: `POST`,
};
return fetch(`${server}/api/weather?city=${city}`, options)
.then((response) => {
if(response.ok){
return response.json()
}
throw new Error('Api is not available')
})
.catch(error => {
console.error('Error fetching data in city data: ', error)
})
}
ForecasButtons.js
import React, { useState, useEffect } from 'react';
import { fetchCityData } from '../lib/cityData'
export const ForecastButtons = ({ city }) => {
const [payload, setPayload] = useState(null)
const getData = () => {
fetchCityData(city).then((payload) => setPayload(payload));
}
const location = payload?.location?.name;
const currentTemp = payload?.current?.temp_c;
return(
<div className="sm:col-span-2">
<p className="block text-sm font-medium text-gray-700">Select forecast</p>
<button onClick={getData} className="mt-1 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button'>
Today
</button>
<p key={city?.location?.id} className='my-5'>
{ location ? `Current weather in ${location} is ${currentTemp} degrees ` : 'Please search for city to see current weather'}
</p>
</div>
)
}
It works, but as a beginner, I can't tell if this solution has any downsides.