useQueriesを使ったらsuspenseできなくて困った話

1ページでリクエストを送る数が多く、PromiseでいうところのPromise.allをreact-queryのuseQueriesで利用したらPromiseがthrowされず、fallback画面が表示されなかったという話。

react-queryではデータ取得時のhooksが幾つか提供されいますが、一度に多量のリクエストを捌くものとしてuseQueriesというhooksが提供されています。(useQueryと混同しないように)

で、こちらのhooksですが、useQueryでは提供されているsuspenseモードがブログ投稿時点では対応していない模様です。(githubissueには上がっていました。

なので、利用する際にはSuspenseで囲んでも動かないので、いい感じに別にPromiseで囲んでSuspenseをuseQueries以外のPromiseに引っ掛かるようにするか(できるか不明だけど多分できそう?)、旧来の方法を使うしかない模様です。