React カスタムフックでAPIを叩いてみた。

※自分のために記述しています。

useWeatherData.ts

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ファイルであらかじめ必要なキーを記述し、下記のように変数に代入する。

useWeatherData.ts

const apiKey = process.env.REACT_APP_API_KEY;

APIを叩く関数を書いていく。今回はaxiosを使用するので、importしておく。
getWeatherDataという関数を作り、今回は指定の緯度、経度の天気情報を取得したいため、引数にlatとlonを持ってくる。

useWeatherData.ts

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キーも入れ込む。

useWeatherData.ts

.then((res) => {
          console.log(res.data);
          setWeatherData(res.data);
        })
        .catch((err) => console.log(err));

thenの後に成功時の動きの記述をする。
この場合は、setWeatherDataにAPIで叩いたデータ（res）を入れ込む。
catchの後にエラー時の動きを記述。
この場合はconsoleでエラーの内容が出力されるだけになっている。

useWeatherData.ts

return { weatherData, setWeatherData, getWeatherData };

最後にreturnでweatherDataとgetWeatherDataを返して、他のファイルで使用できるようにする。

作成したカスタムフックを他のファイルで使用する：

Modal.tsx

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もこのファイルで簡単に使用できるようになっている。