orvalでTanStack Query v5のuseSuspenseQueryを使う

この記事は株式会社ガラパゴス（有志） Advent Calendar 2023の9日目です。

---

orvalってなに?

orvalは、OpenAPIからフロントエンド用のコードを生成してくれるツールです。
とりわけ、@tanstack/react-queryのコードを生成する機能があり、queryKeyの管理やカスタムフックの命名を脇に置いてフロントエンド開発ができるので、REST API + react-queryを使ったSPA開発では、個人的には無くてはならない程の存在です。

https://orval.dev/

TanStack Query v5でSuspenseのサポートが安定版になる

TanStack Query v5がリリースされ、今まではuseQueryのオプションとしてsuspense: booleanを渡すという形でSuspenseをサポートしていましたが、useSuspenseQueryという別のフックに分離されました。
（v4まではexperimentalだったんですね。）

new hooks for suspense

orvalでuseSuspenseQueryを使ったcodegenをする

orvalでもuseSuspenseQueryを使ったコードの生成をサポートしたようのですが、ドキュメントから素直に辿り着けなかったのでメモします。

orval v6.19.0の下記のコミットでuseSuspenseQueryのサポートが追加されています。

https://github.com/anymaniax/orval/commit/83e567bb40dcc652d05352dfa3d479978e91dfb0

ドキュメントだと、「How use other query」を参考に、orvalの設定ファイルを編集し、useSuspenseQueryを使ったフックの生成をONにします。

orval.config.ts

module.exports = {
   petstore: {
     output: {
       ...
       override: {
         query: {
           useSuspenseQuery: true,
           version: 5,
         },
       },
     },
     ...
   },
 };

（versionオプションがどういった役割なのか確認できず...とりあえず付けています。）

上記のようにuseSuspenseQuery: trueを記述してcodegenを行うと、useGetHogeSuspenseのようなuseSuspenseQueryを使ったカスタムフックが生成されます。

余談

react-queryのSuspenseサポートが専用のフックになったことと、その他のv５での変更で、個人的には下記が大きな変更だと感じました。

• dataの型がdata | undefinedだったものが、undefinedが無くなる
• placeholderDataが無いため、「フェッチが完了するまではfallbackを表示せずにstaleのデータを表示」のような挙動を実装するときに、startTransitionやuseDeferredValueを使う必要がある。

dataのundefinedが無くなるのはとても嬉しく、startTransitionやuseDeferredValueを使った実装は、まさにReactドキュメントのSuspenseの項目にある書き方で、「useDeferredValueってこういうふうに使うんだぁー」という感想です。

orvalは多機能でMSWでのモックの生成もできるので、もっと広まってほしいと思う今日この頃です。