Next.jsでBFFを作る時にopenapi-typescript対応したreact-queryを使いたい
masaoblueなんか適当なタイトルだけどとりあえずメモしたかった...
エラー
Next.jsのv14でAPI(route.ts)内でaxiosをimportしていると以下の警告が出た。
書かれている通り、supports-colorのバージョンを指定してあげると一旦解決
やりたいこと
この記事を参考に、react-query版のhooksを作りたい
補足swrかreact-queryかの判断
正直どちらでも要件は満たせる。
ただ、本日(2023/11/23)時点でreact-queryは useSuspenseQueryなどのhooksが用意されている
これに対して、swrはexperimental状態だと言っている
React はまだサスペンスをデータ取得フレームワークである SWR などで使うことを 推奨していません (詳細)。 これらの API は将来的に私たちの調査により変更される可能性があります。
あくまで個人的な感覚だけど、swrの開発元であるVercelとしてはServer Componentを使う方針が推しなのだろうから、これ以上swrを便利にする気はあまりない...とかそういう理由はあるのではないだろうか(違ったらすみません。何か情報があるなら知りたい)
swrのドキュメントに書かれている 使うことを推奨していません の話は、詳細情報としてリンクされている先が2022/03/29のreact-18リリース時のものなので、今もその通りなのかは分からない。
また、react側のSuspenseのドキュメント には以下の記載がある。
The exact way you would load data in the Albums component above depends on your framework. If you use a Suspense-enabled framework, you’ll find the details in its data fetching documentation.
Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
(英語は弱々なのでChatGPTと相談した上で) 恐らくこれは「現時点でデータフェッチのためにSuspenseを使う場合、独自の実装にするのではなくその目的のためのフレームワークを使うことを推奨するよ。使い方はフレームワークのドキュメントを見てね。」という感じ。
opinionated framework はこの記事を参考にすると制約のあるフレームワーク みたいなニュアンスで、つまり 目的がデータフェッチに限定されているフレームワーク というような意味合いだと思われる。
この記載に沿って判断するなら、swrはドキュメントで まだ推奨されてないよ という記載が残っている状態であり、一方のreact-query側は v4の時点で "Suspense mode for React Query is experimental" と書かれていた のが、v5では正式にhooksとして定義されているのだから、こちらは積極的に使っても問題ない状態であると判断した。
masaoblue全然知らなかったけど、react-queryはv3からv4でnpmの名前変わったんだなぁ。
v3まではreact-query
v4以降は@tanstack/react-query