JavaScript React

React SWRを使ってみる

 

最近はreactを勉強しているなおぴです。

今回はその中でSWRを使ってAPIからデータを取得するということを

学んだので簡単にまとめていきたいなと思います！

 

SWRとは？

 

SWR画像

SWRとは、Vercel社が作成した
React Hooksで作成されたデータフェッチ用のライブラリです。

SWRを使うことで非同期でデータを取得するということが簡単になります。

 

サンプルコード

今回使用するAPIはJsonPlaceholder となります。

まずはhooks側から載せます。

 usePosts.jsx
import useSWR from "swr";
const fetcher = async (url) => {
const response = await fetch(url);
if (!response.ok) {
throw new Error("エラーが発生したため、データの取得に失敗しました");
}
const json = await response.json();
return json;
};
export const usePosts = () => {
const { data, error } = useSWR(
"https://jsonplaceholder.typicode.com/posts",
fetcher
);
return {
data,
error,
isLoading: !error && !data,
isEmpty: data && data.length === 0,
};
};

useSWRの初期値としてurlを渡し、fetcherには responseの結果ごとに

処理を切り分けています。すごく簡単ですね！

 

次に呼び出す側です。

 index.jsx
import useSWR from "swr";
import { usePosts } from "src/hooks/usePosts";
import Link from "next/link";
export const Posts = () => {
const { data, error, isLoading, isEmpty } = usePosts();
if (isLoading) {
return <div>ローディング中</div>;
}
if (error) {
return <div>{error.message}</div>;
}
if (isEmpty) {
return <div>データは空です</div>;
}
return (
<ol>
{data.map((post) => {
return (
<li key={post.id}>
<Link href={`/post/${post.id}`}>{post.title}</Link>
</li>
);
})}
</ol>
);
};

hooks側で定義した isLoading、isEmptyで処理を分けることも可能となります。

これから色々触ってみてもっとSWRについて学んでいこうと思います。

ここまでみてくださりありがとうございました！

-JavaScript, React