【SWR】React Hooks ライブラリSWRを使ってみる

SWRとは？

データ取得のための React Hooks ライブラリの1つです。
SWRは、Next.jsの開発チームによって作成され、Reactアプリケーションのデータ取得を
簡単かつ効率的に行うことができます。

SWRは、キャッシュと再利用に特化しており、ページやコンポーネントの表示中に必要なデータを自動的に取得し、同じデータを再利用することができます。

また、オフラインの状態でも最新のデータを提供することができます。

SWRは、APIエンドポイントに対するデータ取得やGraphQLクエリに対するデータ取得に対応しています。SWRは、fetch APIとともに使用されることが多いですが、axiosやGraphQLクライアントとも連携できます。

インストール

npm の場合

npm install swr

yarn の場合

yarn install swr

完成コード

import useSWR from 'swr';

function App() {
    const {data, error} = useSWR('https://jsonplaceholder.typicode.com/posts');

    if (error) return <div>Failed to load</div>;
    if (!data) return <div>Loading...</div>;

    return (
        <div>
            {data.map(post => (
                <div key={post.id}>{post.title}</div>
            ))}
        </div>
    );
}

export default App;

    "swr": "^2.1.5",

上記がpackage.jsonに入ってればOK

この例では、useSWRがAPIエンドポイント[https://jsonplaceholder.typicode.com/posts]

からデータを取得しています。

データがまだ取得されていない場合は、"Loading..."が表示されます。
データが取得されると、それがマップされ、それぞれの投稿のタイトルが表示されます。