バックエンドが null を返したときのフロントエンド実装
2024-05-17
nickname: null とキー欠損は同義ではありません。区別が曖昧だと表示崩れや更新 API の誤送信が発生します。
空値の 3 パターン
欠損キー、null、空文字は意味が違うため、API 契約で明確化します。
TypeScript 設計
nickname?: string と nickname: string | null を意図的に使い分けます。
表示レイヤー
API 境界で正規化し、null 表示は一貫したプレースホルダに統一します。
const label = user.nickname ?? "Not set";フォーム送信
PATCH では omit は変更なし、null はクリア、という意味を仕様として固定します。