SWR 1.0 の発表

August 27th, 2021 by Shu DingJiachi Liu

ほぼ二年前、みんなが愛する小さなデータフェッチ 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 関数を使用してください。

詳細については、キャッシュプロバイダーのドキュメントを読むことができます。

useSWRConfig()

現在のキャッシュプロバイダーとグローバルな 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 のテストがあります。詳細については、変更ログ (opens in a new tab)をお読みください。

ドキュメントの翻訳

コントリビューター (opens in a new tab)と Nextra の i18n 機能 (opens in a new tab)のおかげで、 6 つの異なる言語で SWR ドキュメントを提供できるようになりました：

移行ガイド

`useSWRInfinite` のインポートの更新

useSWRInfinite は、 swr/infinite からインポートする必要があります：

- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'

対応する型を使用している場合は、インポートパスも更新してください：

- import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr'
+ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr/infinite'

`revalidate` から `mutate` へ変更

useSWR は、 revalidate メソッドを返さなくなりましたので、代わりに mutate に変更します：

- const { revalidate } = useSWR(key, fetcher, options)
+ const { mutate } = useSWR(key, fetcher, options)
 
 
  // ...
 
 
- revalidate()
+ mutate()

`initialData` から `fallbackData` へ名前を変更

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

フックから返された `mutate` を使用することをオススメします

これは重大な変更ではありませんが、 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 (opens in a new tab) で変更ログ全体を読む。

今後

今後のリリースでは、安定性を維持しながらライブラリを改善し続けます。また 1.0 では、将来の React のバージョンを受け入れることを目指して、すでにいくつかの新機能と改善が準備されています。さらに、React でデータ取得を行う際の体験や、このライブラリを使用する際の体験を向上させるための新機能にも取り組んでいます。

このリリースについて何かご意見がありましたら、ぜひお知らせください (opens in a new tab)。

ありがとう！

また、コミュニティ全体では 110 名のコントリビューター (opens in a new tab)（＋ 45 名のドキュメントコントリビューター (opens in a new tab) ）、そしてご協力いただいた皆様、フィードバックをいただいた皆様にも感謝しています。

SWR 2.0 の発表