【React】APIをカスタムフックで扱いやすくする

hchaki

2022.1.28

実践と知見

こんにちは Gaji-Labo フロントエンドエンジニアの茶木です。

apiとの格闘の日々が続いています。
特にエラーの取り回しは、非同期処理も重なっており、地味に複雑だと思います。
そこで、一度使いやすいパターンを作ってしまおうと思います。

基本形

エラー処理を書かない基本形は api の非同期処理を useEffect の中で吸収し、 res の有無で、ローディングとコンテンツを出し分けするようにします。

const [state, setState] = useState();
useEffect(() => {
  (async () => {
    const res = await getSomthingApi();
    setState(res);
  })();
}, []);

if(!res) return <p>ローディング中</p>
const {data} = res;
return <p>コンテンツ:{data.id}/{data.name}</p>

これにエラー処理を書きたいのですが、ここに try 〜 catch を書くと少々複雑になりそうです。そこで下準備にカスタムフックを useApiLoader と useAsyncCallback 作ります。

useApiLoader

api のレスポンスを格納するための state と api をセットで扱う useApiLoader です。基本形の1〜7行目をカスタムフックにした形です。

const useApiLoader = (fn, deps) => {
  const [state, setState] = useState();
  useEffect(() => {
    const f = async () => {
      const s = await fn();
      setState(s);
    };
    f();
  }, deps);
  return state;
};

`useAsyncCallback`

deps がついて少し便利な useAsyncCallback です。非同期版の useCallback のカスタムフックです。

const useAsyncCallback = (callback, deps) => 
  useCallback((...args) => {
    const f = async () => callback(...args);
    return f();
  }, deps);

apiをカスタムフックにする

この useAsyncCallback でラップした api のカスタムフック、例として useGetSomethingApi を作ります。
まずエラー処理のないケースで、レスポンスの加工をこの段階で行っています。今回は return res.data とし、後続の処理で使わない情報を捨てています。

const useGetSomethingApi = (id: string) =>
  useAsyncCallback(async (id) => {
    const res = await getSomethingApi(id);
    return res.data;
  }, [id]);

これにエラー処理を加えると以下のようになります。同じくcatch節 でエラー情報を加工しています。

const useGetSomethingApi = (id: string) =>
  useAsyncCallback(async () => {
    try {
      const res = await getSomethingApi(id);
      return res.data;
    } catch (e) {
      return {
        error: {
          code: e?.response?.data?.code,
          message: e?.response?.data?.message,
        }
      };
    }
  }, [id]);

使ってみる

カスタムフックにより、ローディング、エラー、正常表示の書きわけができるようになりました。

const getApi = useGetSomethingApi(id);
const data = useApiLoader(getApi, [getApi]);

if(!data) return <p>ローディング中</p>
if( "error" in data ) {
  const { error } = data;
  alert(`エラー:${error.code}/${error.message}`);
  return <></>;
}
return <p>コンテンツ:{data.id}/{data.name}</p>;

レンダリングパートは非同期処理であることを気にせずに記述できます。
しかも、もし id が変わると getApi が作り直され getSomethingApi が再度呼び出されるので react の振る舞いにも沿っていて安心ですね！