Reactでらくらく非同期通信 SWRの紹介

SWRとは、

SWRとはReactのバックエンド通信を行うラッパーです。
Reactは通常fetchという関数を使ってバックエンドと通信をしますが、
通常の通信は、404エラーや認証エラー等、様々な要因で失敗します。

そこで、fetchによる通信に様々なエラー状況の対応をさせるために、
処理をカスタマイズ可能にするラッパーがSWRです

SWRを使わない実装

App.js

import { useState } from 'react'

export default function App() {
// ステートを用意しておく
const [data setData] = useState("")

//APIのアドレスを定義しておく
const url = './v1/api/getUserData'

//アドレスにリクエストを送信する
  fetch(url)
    .then(res => res.json())
    .then(res => setData(res))

export default App;

これが正常に動けばいいのですが、
バックエンドサーバーがエラーを起こすと、dataステートにはundefinedが定義されてエラーになってしまいます。
そこで、SWRのお出番です

SWRを使う実装

App.js

import useSWR from 'swr'

// フェッチ関数を定義
const fetcher = (url) => fetch(url)
  .then((res) => res.json());

// デフォルトコンポーネント
export default function Home() {

//APIのアドレスを定義しておく
const url = './v1/api/getUserData'

  const { data, error } = useSWR('./data.json', url )
export default App;

なんか、関数が一つ増えてわけわからんくなっただけじゃん、と思うかもしれませんが、
リクエスト処理とリクエスト処理の実装を分けることで、
実際の本処理が少なくなり、更に、リクエスト処理にはエラー処理を分岐させることが出来ました。

バックエンド側の処理は、それぞれの環境によって違うと思うので、
このような、レスポンスによって、処理を分岐させるラッパーは役に立つと思います

いい感じにクールになりましたね(*'▽')