README-ja.md

SWR for Compose

React SWRをJetpack ComposeとCompose Multiplatform 向けに移植したクローンライブラリです。
サポートされているプラットフォームはAndroid、そして実験的にDesktop(JVM)、iOSをサポートしています。

オリジナルのReact SWRのAPI仕様をできる限り踏襲しており、オプションの大部分をサポートしています。

"SWR"とは？

React SWRによると、"SWR"とは下記を指します。

“SWR” という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に最新のデータを持ってくるという戦略です。

インストール

下記の *.*.* を最新のバージョンに置き換えてbuild.gradleのdependenciesに追加してください。

implementation("com.kazakago.swr.compose:swr:*.*.*")

クイックスタート

オリジナルのReact SWRと同様に、fetcher関数を用意したらuseSWR()にキーとともにセットするだけです。
戻り値に対してKotlinの分解宣言 を用いるとReact SWRと同じように記述できます。

private val fetcher: suspend (key: String) -> String = {
    getNameApi.execute(key)
}

@Composable
fun Profile() {
    val (data, error) = useSWR("/api/user", fetcher)

    if (error != null) {
        Text("failed to load")
    } else if (data == null) {
        Text("loading...")
    } else {
        Text("hello $data!")
    }
}

例

詳細な実装例はexampleモジュールを参照して下さい。Compose Multiplatformアプリとして実行できます。

サポートされている機能

Feature名	サポート	補足
Options	下記参照
Global Configuration	✅
Data Fetching	✅
Error Handling	✅
Auto Revalidation	✅
Conditional Data Fetching	✅
Arguments	✅
Mutation	✅️
Pagination	✅
Prefetching Data	✅️	useSWRPreload()から利用できます
Suspense	❌
Middleware	❌

サポートされているオプション

React SWRに対して、以下のオプションをサポートしています。
https://swr.vercel.app/docs/options

オプション名	サポート	デフォルト値
suspense	❌
fetcher(args)	✅
revalidateIfStale	✅	true
revalidateOnMount	✅	fallbackDataが設定されていないときのみtrue
revalidateOnFocus	✅	true
revalidateOnReconnect	✅	true
refreshInterval	✅	0.seconds (無効)
refreshWhenHidden	✅	false
refreshWhenOffline	✅	false
shouldRetryOnError	✅	true
dedupingInterval	✅	2.seconds
focusThrottleInterval	✅	5.seconds
loadingTimeout	✅	3.seconds
errorRetryInterval	✅	5.seconds
errorRetryCount	✅
fallback	✅
fallbackData	✅
keepPreviousData	✅	false
onLoadingSlow(key, config)	✅
onSuccess(data, key, config)	✅
onError(err, key, config)	✅
onErrorRetry(err, key, config, revalidate, revalidateOps)	✅	指数バックオフ アルゴリズム
compare(a, b)	❌
isPaused()	✅	false
use	❌

パフォーマンスについて

Deduplication やDeep Comparison はサポートされていますが、Kotlinの言語仕様上Dependency Collection には対応しないため、本家React SWRに比べると単純な再レンダリング（re-compose）の回数は多くなることがあります。

しかしながら、子のComposable関数へ渡す引数を（例えばdataのみにするなど）絞ることでパフォーマンスの低下を防ぐことが可能です。