非同期データ取得の型設計
矛盾した状態を許容する型を避ける
非同期データ取得において以下のような型設計は避けてください。
// Bad: dataにアクセス可能なのにloading/errorも同時に存在しうる
type AsyncState<T> = {
data: T | undefined;
loading: boolean;
error: Error | undefined;
};
この型は以下の問題を持ちます。
dataが存在するのにloading: trueという矛盾した状態を型が許容しますdataとerrorが同時に存在する状態を型が許容します- 実行時の状態遷移に依存しており、型レベルでの安全性がありません
推奨されるアプローチ
Suspenseパターンを使う
React Suspenseを使えば、ローディング中はコンポーネントがレンダリングされないため、
dataの型が確定します。
// Good: useSuspenseQueryは
[Description truncada. Veja o README completo no GitHub.]