コンテンツへスキップ
ブログ
SWR 1.0 リリースのお知らせ

SWR 1.0 リリースのお知らせ

2021年8月27日 作者 Shu DingJiachi Liu

約2年前、私たちはオープンソースで公開（新しいタブで開きます）しました。SWR は、多くの人々に愛されている小さなデータフェッチング React ライブラリです。本日、SWR の 1.0 バージョンという新たなマイルストーンに到達しました！

新機能

サイズ縮小

パフォーマンス は SWR の最も重要な機能の1つです。1.0 では、既存の機能を削除せずに、ライブラリのサイズを大幅に縮小しました。

  • コアサイズを41％縮小（gzip圧縮時は24％縮小、**3.9 kB**）
  • パッケージのインストールサイズを52％縮小
  • ツリーシェイキングの改善

ライブラリを軽量化することで、アプリケーションバンドルサイズ、ランタイム、node_modules ディレクトリのサイズを小さくすることができます。

パッケージのバンダリングも改善され、パスインポートをサポートするようになりました。

import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'

useSWRInfinite を使用していない場合、アプリケーションに含まれません。

フォールバックデータ

1.0 では、事前にフェッチしたデータを、特定のキーを持つすべての SWRフックの初期値として提供できる新しいfallbackオプションが追加されました。

<SWRConfig value={{
  fallback: {
    '/api/user': { name: 'Bob', ... },
    '/api/items': ...,
    ...
  }
}}>
  <App/>
</SWRConfig>

これは、SSG、SSR、テスト用のデータモックアップなどのシナリオで非常に役立ちます。詳細については、ドキュメントのNext.js SSGとSSRを参照してください。

一貫性を高め、混乱を避けるために、古いinitialDataはfallbackDataに名前が変更されました。これは、指定されたフックに対して単一のフォールバック値を提供します。

イミュータブルモード

リソースが変更されないことを知っていれば、**イミュータブル**としてマークすることができます。自動再検証を無効にして、リクエストを1回だけ行う方が良いでしょう。これを容易にするためのヘルパーフックが追加されました。

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] }}>
 
// ... or directly in `useSWR`:
useSWR(key, fetcher, { use: [...middleware] })

この機能では多くの新しいアイデアを実装することができ、いくつかの例を作成しました。 リクエストロガー、キー変更時の以前のデータの保持、そして オブジェクトキーのシリアライズです。

詳細については、ミドルウェアAPI をご確認ください。

改善とテストカバレッジの向上

0.x以降、数百件もの小さな改善とバグ修正を行いました。SWRは現在、データ取得のほとんどのエッジケースを網羅する157個のテストを実施しています。変更ログ (新しいタブで開きます)で詳細を確認してください。

ドキュメント翻訳

私たちのコントリビューター (新しいタブで開きます)とNextraのi18n機能 (新しいタブで開きます)のおかげで、SWRのドキュメントを6つの言語で提供できるようになりました。

移行ガイド

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>
 
// ... or
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 (非推奨)1.0注記
ConfigInterfaceSWRConfiguration
keyInterfaceKey
responseInterfaceSWRResponse
RevalidateOptionInterfaceRevalidatorOptions
revalidateTypeRevalidator
SWRInfiniteResponseInterfaceSWRInfiniteResponseswr/infinite に移動
SWRInfiniteConfigInterfaceSWRInfiniteConfigurationswr/infinite に移動

ベータ版および非公式機能ユーザー

SWRのベータ版を使用している場合、またはドキュメント化されていないAPIを使用している場合は、次の変更点にご注意ください。

  • import { cache } from 'swr' は削除されました。新しいuseSWRConfig API を代わりに使用してください。
  • import { createCache } from 'swr' は削除されました。新しいキャッシュプロバイダーAPI を代わりに使用してください。
  • revalidateWhenStale は revalidateIfStale に名前変更されました。
  • middlewares は use に名前変更されました。

変更ログ

完全な変更ログはGitHubで確認 (新しいタブで開きます)してください。

今後の予定

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

このリリースに関するフィードバックがある場合は、お知らせください (新しいタブで開きます)。

ありがとうございました！

ライブラリへの貢献に対して、小林徹氏 (新しいタブで開きます) と 徐益宣氏 (新しいタブで開きます) に特別な感謝を申し上げます。また、翻訳とドキュメント作成にご尽力いただいたPaco Coursey氏 (新しいタブで開きます)、uttk氏 (新しいタブで開きます)、塩谷知洋氏 (新しいタブで開きます)、Markoz Peña氏 (新しいタブで開きます)、SeulGi Choi氏 (新しいタブで開きます)、陸芳氏 (新しいタブで開きます)、Valentin Politov氏 (新しいタブで開きます) にも感謝いたします。彼らがいなければ、このリリースは実現しませんでした。

また、コミュニティ全体、110名の貢献者 (新しいタブで開きます)（+45名のドキュメント貢献者 (新しいタブで開きます)）、そして、ご支援とフィードバックをいただいたすべての方々に感謝いたします！

SWR 2.0 リリースのお知らせ