第1回
TanStack Queryはどのようなライブラリなのか
Web APIなどを介したデータ取得だけでなく、非同期の状態全般を管理する強力なライブラリ、TanStack Queryについて解説します。メタフレームワークの非同期のデータ取得機能を利用できない場合には、非常に役立つライブラリです。
目次
シェア
はじめに
このシリーズでは、TanStack Queryというライブラリを紹介します。
まずは概要とモチベーションについて学んだ後、基本的な使い方に触れ、よくあるユースケースについても追って解説していく予定です。なお、このシリーズでは執筆現在の最新バージョンであるv5での解説を行います。
TanStackとは
大きな画像TanStack | High Quality Open-Source Software for Web Developers
公式サイトにもあるとおり、TanStackとは、さまざまなライブラリがまとまったOSS群です。
このシリーズで扱おうとしているTanStack “Query”のほかにも、
- TanStack Table：テーブル表示に特化したライブラリ
- TanStack Virtual：バーチャルスクロールに特化したライブラリ
といった、特定の用途に特化したさまざまなライブラリがいくつも管理されています。
どれも便利なものばかりなので、いずれお世話になることもあるかもしれません。
TanStack Queryとは
さまざまなライブラリがあるTanStackの中でも、このTanStack Queryはどういったライブラリなのでしょうか。
公式サイトのトップには、
Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular
とあります。
日本語に訳すとこのような感じでしょうか。
- TS/JSのどちらでも使えて、
- React、Solid、Vue、Svelte、Angularといったさまざまなフレームワークに対応している、
- 強力な非同期の状態管理ライブラリ
最初の2つはわかりやすいと思いますが、最後の1つは少しわかりにくいかもしれません（筆者の日本語チョイスの問題かもしれないですが）。
しかしこれこそが、TanStack Queryを知り、そしてうまく導入するために、もっとも理解しておくべきポイントです。
非同期の状態管理とそのポイント
非同期処理にまつわる状態管理と言われて最初に思い当たるのは、やはりWeb APIなどを介したデータ取得とその管理だと思います。
フロントエンドのアプリケーションを実装するにあたって、API、つまりサーバー側にあるデータを利用するのはよくあるパターンです。むしろ、そのためにフロントエンドが存在するといっても過言ではないでしょう。
よくあるパターンであるがゆえに、それに対する実装方法にもいろいろあるのですが、
- 特定のタイミングで、クライアントから、サーバーのデータを読み出して表示
- それをクライアントで更新した後、別のタイミングで、サーバーに送り返す
というのが一般的な処理の流れです。実際に実装したことがある読者も多いと思いますし、シングルページアプリケーションを想像するとわかりやすいかもしれません。
もちろんユースケース次第ではあるものの、このパターンで実装のポイントとなってくるのは、
- 非同期処理の進捗に応じた表示の出し分け
- 初期状態、ローディング中、成功時、エラー時など
- 同じAPIを利用するUI・ページが複数ある場合にどうするか
- それぞれで同じ内容のリクエストを発行する？
- それとも根本で1度きりリクエストし、そのキャッシュを共有する？
- 表示しているデータが古くなった場合にどうするか
- すべての利用箇所が定期的に再取得するべき？
- ユーザー自身がデータを更新したら、関連箇所を手動で更新して回る？
- ページネーションや無限スクロールを実現するための変数管理
というあたりでしょうか。
TanStack Queryは、まさにこれらのポイントを押さえた便利なライブラリなのです。
データ取得にまつわるトレンド
昨今のトレンドとしては、ReactやSvelteなどを単体で起用するより、Next.jsやRemix、SvelteKitといったメタフレームワークと呼ばれるレイヤーをあわせて使うことも多いと思います。そして、これらのメタフレームワークが、非同期のデータ取得に関しても、いくつかの方法を提供していることも多いです。
たとえば、サーバーサイドレンダリングを利用することで、リクエスト時にサーバー側で初期データを取得してしまい、クライアント側でのデータ取得をスキップすることもできます。ほかにも、HTMLのform要素を使ってデータを更新・再表示する機構を備えていたり、バンドラーを介することで、透過的にサーバー側のコードを呼び出せるようにする仕組みも登場してきています。
これらの仕組みはもちろん便利ですが、メタフレームワークが提供する機能である以上、その使い方にはルールがあり、実現できるUIにも制限があります。
これは筆者の体感ですが、より柔軟な要望にあわせてUIを構築したいケースでは、これらの機能を使用できない場合も多いです。そもそもメタフレームワーク自体は利用できても、すでにAPIは別の会社・インフラで提供されることが決まっているなど、メタフレームワークのサーバー側機能を利用できない案件もあります（ピクセルグリッドの受託案件はこうなることがほとんどです）。
そのため、クライアント主導でデータ取得を行うケース、つまりは、TanStack Queryを利用したくなるケースは、まだまだよくあるという筆者の認識です。
データ取得ライブラリではない
ここまで、もっとも定番なユースケースであろうAPIによるデータ取得を例にしてきましたが、TanStack QueryはAPIのデータ取得ライブラリではありません。
つまり、それがPromiseを返す非同期処理でありさえすれば、
- ネイティブの
fetch()や、Axiosなどのライブラリを使ったWeb APIの利用 - GraphQLのクエリ
- WebWorkerとのメッセージングによる処理
- ローカルに閉じた単なる非同期処理
といった詳細に区別はありません。
コードもまだ登場していないため、ややわかりにくいかもしれませんが、頭の片隅に置いておいてください。
おわりに
前置きが長くなりましたが、TanStack Queryがどういう場面で便利なライブラリなのか、そのモチベーションが理解できたでしょうか。
TanStack Queryはとても多機能なライブラリで、便利なのは間違いないですが、
- 単に初回だけデータを取得して表示できればよい
- 表示箇所も限定的で、更新時の再描画も手間ではない
といった程度の要件であれば、わざわざ採用しなくてよいとも思います。少なからずJavaScriptのファイルサイズが増加する問題もありますし、不必要に依存ライブラリを増やすべきではないからです。
たとえばSolid.jsならcreateResource()というAPIが標準機能として同梱されていますし、Svelteなら#awaitブロックをうまく使うことで事足りるケースもあります。
Reactのプロジェクトであれば、SWRといった別の軽量なライブラリも検討してみるとよいでしょう。
次回の記事では、実際にTanStack Queryを導入し、セットアップとその基本形を解説します。
