SWRの便利さを伝えたい

はじめに

CSRでのGETリクエストにSWRを使わないことは考えられないくらい、便利で大好きなデータフェッチライブラリです。
キャッシュ、リアルタイムのデータ同期、エラーハンドリングなど、便利な機能が備わっていて、ホントに使いやすいです。
便利って聞くし気になってるけどわからないから手を出せないのよ。という方に向けて使い方を紹介してみたいと思います。

なにがいいのか

SWRの大きな特徴の1つは、キャッシュ機能です。一度取得したデータを再度取得しようとしたときにキャッシュされたデータを返してくれるという強みがあります。
データフェッチは時間のかかる処理ですが、SWRを使えば一度叩いたAPIを再び叩くと元々持っていましたみたいな速度でデータを返却してくれます。

それと、後述しますがmutateです。
APIを叩き直さずにローカルのデータを即座に更新できる。楽すぎます。
便利過ぎてもうSWR使うな縛り来たら(来ないと思う)辛いです。

使い方

インストール

npm install swr

インポート

import useSWR from 'swr'

使い方の例

const { data, error, isLoading } = useSWR('/api/posts', fetcher)

useSWRの第一引数にエンドポイント、第二引数にはデータフェッチする関数を渡します。

fetcherの例です。

const fetcher = async () => {
    const resp = await fetch(`/api/posts`);
    if (resp.status !== 200) {
      const errorData = await resp.json();
      throw new Error(errorData.message);
    }
    const data = await resp.json();
    return data;
  };

条件付きフェッチもあって、第一引数に三項演算子でこの条件満たしていたらfetchして

、そうじゃなければエンドポイントにnull渡すみたいなことも出来ます。

//shouldFetchDataは例えばtokenがないとか。
const { data, error, isLoading }  = useSWR(shouldFetchData ? '/api/posts' : null, fetcher);

こんな感じです。
書き方は他にもあるので詳しくは公式をご確認お願い致します。

レスポンスの中身

data

fether 関数がreturnしたデータが入ります

error

fether 関数内で発生した(スローした)エラーが入ります。

基本的にdataがundefindeならerrorはundefindeではなく、その逆も然りです。

isLoading

データ取得中であるかを示すブール値です。

mutate

dataを最新の情報に更新する関数です。

これくらいしか使ったことないです。

mutateの使い方

基本的にmutate()と書く使い方をします。

使い時

データを更新した、削除した時に使います。
SWRを使わなかったら、更新や削除した時にGETリクエストしなおしますよね？？
それ、mutateがあればしなくていいんです。

削除の例

const deletePost = async (id: string) => {
    const result = confirm("削除しますか？");
    if (!result) return;
    try {
      await del(`/api/posts/${id}`);
      mutate();　//ここでローカルデータ更新
    } catch (e) {
      alert(e);
    }
  };

これだけで、一覧表示していた一覧から削除したデータが消えます。
あらためてGETする必要なしです。

おわりに

めちゃくちゃ簡単なの伝わりましたかね？？
魅力が伝わっていたらいいなと思います。
CSRでGETリクエストするとなったら迷うことなくSWRインストールします。

SWRを使わないデータフェッチはもう考えられないです。
ここで紹介した基本的な使い方を試してみて、SWRの便利さをぜひ体験してみていただきたいです♪