React カスタムフックでAPIを叩いてみた。
※自分のために記述しています。
import axios from "axios";
import React, { memo, useCallback, useState } from "react";
import weather from "../weather.json";
type WEATHER = typeof weather;
type getData = (id: number) => void;
type UseCount = {
weatherData: WEATHER | undefined;
getWeatherData: getData;
};
export const useWeatherData = () => {
const apiKey = process.env.REACT_APP_API_KEY;
const [weatherData, setWeatherData] = useState<WEATHER | undefined>();
const getWeatherData = useCallback(
async (lat: number | undefined, lon: number | undefined) => {
await axios
.get<WEATHER>(
`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&units=metric&appid=${apiKey}`
)
.then((res) => {
console.log(res.data);
setWeatherData(res.data);
})
.catch((err) => console.log(err));
},
[]
);
return { weatherData, setWeatherData, getWeatherData };
};
カスタムフックの概要:
hooksフォルダ配下に【use〜】というファイルを作り、そこでカスタムフックの記述をしていく。
上記のコードの最後にあるreturnで返されるものが別のファイルで使用できるようになる。
returnで返すのは、useStateで指定している値や関数など。
カスタムフックでAPIを叩く:
今回使用したAPIはOpenWeatherのWeather APIです。
APIキーが必要なため、.envファイルであらかじめ必要なキーを記述し、下記のように変数に代入する。
const apiKey = process.env.REACT_APP_API_KEY;
APIを叩く関数を書いていく。今回はaxiosを使用するので、importしておく。
getWeatherDataという関数を作り、今回は指定の緯度、経度の天気情報を取得したいため、引数にlatとlonを持ってくる。
axios.get<WEATHER>(
`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&units=metric&appid=${apiKey}`
)
axios.getの後にTypeScriptの場合は型指定をする必要がある。(APIの型指定については別途記述する。)
get()内のURLに緯度と経度の情報を入れ込み、さらに先ほど変数に格納したAPIキーも入れ込む。
.then((res) => {
console.log(res.data);
setWeatherData(res.data);
})
.catch((err) => console.log(err));
thenの後に成功時の動きの記述をする。
この場合は、setWeatherDataにAPIで叩いたデータ(res)を入れ込む。
catchの後にエラー時の動きを記述。
この場合はconsoleでエラーの内容が出力されるだけになっている。
return { weatherData, setWeatherData, getWeatherData };
最後にreturnでweatherDataとgetWeatherDataを返して、他のファイルで使用できるようにする。
作成したカスタムフックを他のファイルで使用する:
const { weatherData, getWeatherData } = useWeatherData();
let lat = props.singleMountain?.location.latitude;
let lon = props.singleMountain?.location.longitude;
useEffect(() => {
if (lat) {
getWeatherData(lat, lon);
}
}, [lat, lon]);
useStateと同じように記述すれば、他のファイル内で使用することができる。
getWeatherData(lat, lon)のように緯度と経度を引数に持ってくる。
weatherDataもこのファイルで簡単に使用できるようになっている。
Discussion