useSuspenseQueryでリクエストウォーターフォールに気をつけよう

Tanstack Query v5 から Suspense によるデータ取得が安定版となったことでuseSuspenseQueryを使い始めた方もいるのではないでしょうか。 今回はそんなuseSuspenseQueryを使う上で、リクエストウォーターフォールを発生させないために気をつけるべきことをご紹介します。 コンポーネント内で複数のuseSuspenseQueryを実行しない useQueryと同じような感覚でコンポーネント内で複数のクエリを実行すると、リクエストウォーターフォールが発生します。一つ目のクエリが内部的にPromiseをthrowするため、二つ目以降のクエリが実行される前にコンポーネントがサスペンドするためです。 const firstQuery = useSuspenseQuery({ queryKey: ['first'], queryFn: fetchFirst }