SWR という面白そうなライブラリに遭遇し、気になったので簡単にアプリを作ってみようと思います。

構成はReact+Typescript+SWRです。

今回はReact+Typescriptの環境構築の仕方などは書きません。

create-react-appを使うなり、webpackを使うなり自分の好きな方法で構築して下さい。

APIはGitHubが公開しているAPIがあるのでそちらを使っていきたいと思います。

API(GitHub)

• GitHub APIドキュメント

ライブラリ公式(英語のみ)

• SWR公式ホームページ
• SWR GitHubレポジトリ

環境

MacBookPro v10.14.6
node v10.15.3
yarn v1.15.2
React v16.13.0
Typescript v3.8.3
SWR v0.1.18

インストール

皆さんそれぞれReact Appを作成したとして、今回のメインであるSWRをインストールします。

# SWRを追加
$ yarn add swr

使用するAPI

今回、GitHub APIの中でもユーザーネームを入れたらそのユーザーのpublicリポジトリを返すAPIを使いたいと思います。

# usernameのリポジトリを返すAPI
https://api.github.com/users/:username/repos

• GitHub APIは1日にリクエストを送れる回数が決まっているので、気をつけて下さい。

実装

ここからアプリを実装していきたいと思います。

まず、今回必要なモノをimportするのと雛形を作成していきます。

import React from 'react';

// 先ほどインストールしたSWR
import useSWR from 'swr';

const App: React.FC = () => {};

export default App;

ここまできたら、GitHub APIを使ってデータを取得する為のコードを追加していきます。

import React from 'react';
import useSWR from 'swr';

const App: React.FC = () => {
  // 追加
  const fetcher = (url: string) => fetch(url)
    .then(res => res.json)
    .catch(error => error)

  // facebookのリポジトリを取得します
  const { data, error } = useSWR(
    "https://api.github.com/users/facebook/repos",
    fetcher
  )
}

export default App;

これだけでAPIへのリクエスト、レスポンスの取得ができます。
めちゃくちゃシンプルじゃないですか???
ここまで来たら完成したようなもの、後はViewに表示させたいと思います。

import React from 'react';
import useSWR from 'swr';

const App: React.FC = () => {
  // 追加
  const fetcher = (url: string) => fetch(url)
    .then(res => res.json)
    .catch(error => error)

  // facebookのリポジトリを取得します
  const { data, error } = useSWR(
    "https://api.github.com/users/facebook/repos",
    fetcher
  )

  return (
    <div>
      {data.map((d) => (
        <a href={`https://github.com/${d.full_name}`}>
          {d.full_name}
        </a>
      ))}
    </div>
  )
}

export default App

ここまでやるとこうなります。

僕の場合styleをつけているので少し違うと思いますが、facebookのリポジトリを取得することができました!

完成形

完成形がこちらです。

import React from 'react';
import useSWR from 'swr';

const App: React.FC = () => {
  // 追加
  const fetcher = (url: string) => fetch(url)
    .then(res => res.json)
    .catch(error => error)

  // facebookのリポジトリを取得します
  const { data, error } = useSWR(
    "https://api.github.com/users/facebook/repos",
    fetcher
  )

  // 追加
  // errorとloadingの部分はSWR公式ホームページと同様にしています。
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return (
    <div>
      {data.map((d) => (
        <a href={`https://github.com/${d.full_name}`}>
          {d.full_name}
        </a>
      ))}
    </div>
  )
}

export default App

シンプルに書けるだけでなく読みやすい。
個人的にオススメなライブラリなので、皆さんもお試しあれ。

参考サイト

• React
• Typescript
• Github
• SWR公式ホームページ
• SWR GitHubレポジトリ