image | description |
---|---|
ほぼ二年前、みんなが愛する小さなデータフェッチ React ライブラリである SWR をオープンソースにしました。そして本日、私たちは大きな節目を迎えました: SWR の 1.0 バージョンです。 |
import Authors, { Author } from '@components/authors'
ほぼ二年前、みんなが愛する小さなデータフェッチ React ライブラリである SWR をオープンソースにしました。そして本日、私たちは大きな節目を迎えました: SWR の 1.0 バージョンです!
パフォーマンスは、 SWR の最も重要な機能の一つです。 1.0 では、既存の機能を削除せずにライブラリを大幅に小さくしました:
- コア部分を 41% 削減( gzip 圧縮時では 24% 小さい、 3.9 kB )
- パッケージのインストール時のサイズを 52% 削減
- tree-shaking の改善
ライブラリを軽量化する理由はたくさんあります:アプリケーションのバンドルが小さくなり、ランタイムが軽量になり、 node_modules
ディレクトリが小さくなります。
パッケージのバンドルも改善され、パスのインポートがサポートされるようになりました:
import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'
useSWRInfinite
を使用しない場合は、アプリケーションに含まれなくなります。
1.0 では、新しい fallback
オプションが追加され、特定のキーを持つすべての SWR フックの初期値として、事前に取得した任意のデータを提供することができます:
<SWRConfig value={{
fallback: {
'/api/user': { name: 'Bob', ... },
'/api/items': ...,
...
}
}}>
<App/>
</SWRConfig>
これは SSG、SSR、テスト用のデータモックアップなどのシナリオに非常に役に立ちます。詳しくは Next.js の SSG と SSR のドキュメントを参照してください。
一貫性を高め、混乱を避けるために、 initialData
を fallbackData
に名前を変更しました。これにより、特定のフックに単一の代替データが提供されます。
リソースが変更されない場合は、リソースをイミュータブルとして固定したい場合があります。その場合は、自動再検証を無効にして、リクエストを一回だけ行うことをオススメします。また、これを簡単にするためのヘルパーフックがあります:
import useSWRImmutable from 'swr/immutable'
// ...
useSWRImmutable(key, fetcher, options)
useSWR
フックとまったく同じ API を備えていますが、タブフォーカスやネットワーク復帰時に再検証されることはありません。また、新しいオプション revalidateIfStale
もあり、これを使用して動作を正確に制御できます。詳細については、こちらをご覧ください。
デフォルトでは、 SWR は単一のグローバルキャッシュを使用してすべてのデータを保存します。 1.0 では、新しい provider
オプションを使用してカスタマイズできます:
<SWRConfig value={{
provider: () => myCache
}}>
<App/>
</SWRConfig>
この新機能を使用して、多くの強力な処理を実行できます。ここにいくつかの例があります: RegEx を使用した複数のキーの変更、 LocalStorage を使った永続キャッシュ、テストケース間のキャッシュのリセット
この新しいキャッシュプロバイダー API は、 React 18 の同時レンダリングとも互換性があります。キャッシュプロバイダーを追加する場合は、必ず useSWRConfig()
から返されるグローバルな mutate
関数を使用してください。
詳細については、キャッシュプロバイダーのドキュメントを読むことができます。
現在のキャッシュプロバイダーとグローバルな mutate
関数を含むすべてのグローバル設定を返す新しいフック API があります:
import { useSWRConfig } from 'swr'
function Foo () {
const { refreshInterval, cache, mutate, ...restConfig } = useSWRConfig()
// ...
}
詳細については、こちらをご覧ください
SWR ミドルウェアは、 SWR フックの上に抽象化を構築して再利用するための新しい方法を提供します:
<SWRConfig value={{ use: [...middleware] }}>
// ... または、直接 `useSWR` で:
useSWR(key, fetcher, { use: [...middleware] })
この機能を使用すると、多くの新しいアイディアを実装できます。いくつかの例を作成しました:リクエストを記録する、 以前の結果を保持する、 オブジェクトキーをシリアライズする
詳細については、ミドルウェア API を確認してください。
0.x 以降、何百もの小さな改善とバグ修正を行いました。 SWR には、データ取得のほとんどのエッジケースをカバーする 157 のテストがあります。詳細については、変更ログをお読みください。
コントリビューターと Nextra の i18n 機能のおかげで、 6 つの異なる言語で SWR ドキュメントを提供できるようになりました:
useSWRInfinite
は、 swr/infinite
からインポートする必要があります:
- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'
対応する型を使用している場合は、インポートパスも更新してください:
- import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr'
+ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr/infinite'
useSWR
は、 revalidate
メソッドを返さなくなりましたので、代わりに mutate
に変更します:
- const { revalidate } = useSWR(key, fetcher, options)
+ const { mutate } = useSWR(key, fetcher, options)
// ...
- revalidate()
+ mutate()
- useSWR(key, fetcher, { initialData: ... })
+ useSWR(key, fetcher, { fallbackData: ... })
SWR は、デフォルトのフェッチャー( データを JSON として解析する fetch
の呼び出し )を提供しなくなりました。変更を移行する最も簡単な方法は、 <SWRConfig>
コンポーネントを使用することです:
<SWRConfig value={{ fetcher: (url) => fetch(url).then(res => res.json()) }}>
<App/>
</SWRConfig>
// ... または
useSWR(key, (url) => fetch(url).then(res => res.json()))
これは重大な変更ではありませんが、 useSWRConfig
フックから返された mutate
を常に使用するように推奨します:
- import { mutate } from 'swr'
+ import { useSWRConfig } from 'swr'
function Foo () {
+ const { mutate } = useSWRConfig()
return <button onClick={() => mutate('key')}>
Mutate Key
</button>
}
キャッシュプロバイダーを使用して無い場合でも、現在のグローバルインポート import { mutate } from 'swr'
は機能します。
TypeScript を使用している場合、一貫性を保つために次の型名が変更されています:
0.x (deprecated) | 1.0 | Note |
---|---|---|
ConfigInterface |
SWRConfiguration |
|
keyInterface |
Key |
|
responseInterface |
SWRResponse |
|
RevalidateOptionInterface |
RevalidatorOptions |
|
revalidateType |
Revalidator |
|
SWRInfiniteResponseInterface |
SWRInfiniteResponse |
swr/infinite へ移動 |
SWRInfiniteConfigInterface |
SWRInfiniteConfiguration |
swr/infinite へ移動 |
SWR のベータ版を使用している場合や、文章化されていない API を使用している場合は、次の変更に注意してください:
import { cache } from 'swr'
は削除されます。代わりに新しいuseSWRConfig
API を使用してください。import { createCache } from 'swr'
は削除されます。代わりに新しい Cache Provider API を使用してください。revalidateWhenStale
はrevalidateIfStale
へ名前が変更されます。middlewares
はuse
へ名前が変更されます。
GitHub で変更ログ全体を読む。
今後のリリースでは、安定性を維持しながらライブラリを改善し続けます。また 1.0 では、将来の React のバージョンを受け入れることを目指して、すでにいくつかの新機能と改善が準備されています。さらに、React でデータ取得を行う際の体験や、このライブラリを使用する際の体験を向上させるための新機能にも取り組んでいます。
このリリースについて何かご意見がありましたら、ぜひお知らせください。
ライブラリに貢献してくださった Toru Kobayashiさん と Yixuan Xuさん、翻訳やドキュメントを作成してくださった Paco Courseyさん、 uttkさん、 Tomohiro SHIOYAさん、 Markoz Peñaさん、 SeulGi Choiさん、 Fang Luさん、 Valentin Politovさん に感謝します。このリリースは彼らなしでは実現できませんでした。
また、コミュニティ全体では 110 名のコントリビューター( + 45 名のドキュメントコントリビューター )、そしてご協力いただいた皆様、フィードバックをいただいた皆様にも感謝しています。