Reactクライアント側からリクエストを送ってデータ取得（axios, SWR）
フロント側からAPIをたたいてデータ取得する場面は非常に多いです。
SWR という React Hooks ライブラリを使うと処理を簡潔に書くことができキャッシュを利用して無駄な通信を抑えることもできます。
今回は SWR の使い方や axios で書いた場合との比較についてまとめました。
取得するデータについて
今回は JSONPlaceholder というサービスを使ってデータの取得をしてみる。
用意された URL に対してリクエストを送ることでテストデータを JSON 形式で返してくれる。例えば下記の URL であればユーザーデータが返ってくる。
https://jsonplaceholder.typicode.com/users
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
/* 省略 */
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "[email protected]",
/* 省略 */
},
・・・
axios を使った例
これを React のアプリ側で取得して表示してみる。
まずは axios をインストール。
yarn add axios
or
npm install axios
axios.get でリクエストを送る。
import { useEffect, useState } from "react";
import axios from "axios";
export const UsersAxios = () => {
const [userData, setUserData] = useState(null);
const [error, setError] = useState('');
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((res) => {
setUserData(res.data);
})
.catch((err) => setError(err.message));
}, [])
return (
<>
<h3>axios で取得</h3>
{error ? <div style={{ color: 'red' }}>{error}</div> : ''}
{userData ? userData.map(data => <div key={data.id}>{data.name}</div>) : ''}
</>
);
}
ブラウザで確認すると 10件のユーザーの名前が表示される。
SWR を使った例
SWR とは、stale-while-revalidate の略で「データ取得のための React Hooks ライブラリ」でクライアント側でデータフェッチをする際に処理をシンプルに書くことができる。取得したデータはキャッシュされるので無駄なフェッチを避け処理が軽くなるというメリットもある。
まずは SWR をインストール。
yarn add swr
or
npm install swr
useSWR をインポートして API にリクエスト。
import useSWR from "swr";
export const UsersSWR = () => {
const fetcher = (url) => fetch(url).then(res => res.json())
const { data, error } = useSWR("https://jsonplaceholder.typicode.com/users", fetcher)
if (error) return <div>ロード失敗</div>
if (!data) return <div>ロード中...</div>
return (
<>
<h3>SWR で取得</h3>
{error ? <div style={{ color: 'red' }}>{ error }</div> : ''}
{data ? data.map(data => <div key={data.id}>{data.name}</div>) : ''}
</>
);
}
ブラウザで確認するとデータ取得が終わるまでは「ロード中...」と表示され、完了すると10件のユーザーの名前が表示される。
まとめ
今回はフロントエンドから React でリクエスト送ってデータ取得するためのやり方について書きました。
axios を使う場合と SWR を使う場合のサンプルコードを比べると SWR を使った方がフロントエンドの処理が簡潔に書けて良いですね。
似たような場面の実装で参考になれば幸いです。
参考
SWR 公式サイト
Zenn SWRを使おうぜという話
Udemy モダンJavaScriptの基礎から始める挫折しないためのReact入門
Author And Source
この問題について(Reactクライアント側からリクエストを送ってデータ取得（axios, SWR）), 我々は、より多くの情報をここで見つけました https://zenn.dev/aono/articles/530db84a82631d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol