React+Typescript+SWRでアプリを作る

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
	);

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

	return (
		<div>
			{data.map((d: any) => (
				<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: any) => (
				<a href={`https://github.com/${d.full_name}`}>
					{d.full_name}
				</a>
			))}
		</div>
	);
}

export default App

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

参考サイト

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