つくる - 一覧のAPI駆動化
第2章のまとめとして作る
新しいことは出てきません。ここまでの5つを組み合わせて、第1章で作った商品一覧を API 駆動に置き換えます。
- 型付きの取得関数 —
fetchItems(category): Promise<Item[]> useEffectでの取得 — 画面が出た時点で並ぶ- 依存配列 — カテゴリを選び直したら取り直す
- クリーンアップ — 古い応答を捨てる
- 第1章の ItemCard — 売り切れの札はそのまま残す
引数を取る取得関数
前回までの fetchItems はカテゴリを知りませんでした。絞り込みを任せるので、引数で受け取る形にします。
async function fetchItems(category: string): Promise<Item[]> {
const res = await fetch("/api/items?category=" + category);
const data: Item[] = await res.json();
return data;
}引数にも戻り値にも型が付いています。呼ぶ側は await fetchItems(category) と書くだけで Item[] が手に入り、API の形を知らずに済みます。
組み合わせるとこうなる
useEffect(() => {
let ignore = false;
async function load() {
const list = await fetchItems(category);
if (ignore) return;
setItems(list);
}
load();
return () => {
ignore = true;
};
}, [category]);これがこのコースで何度も出てくる形です。第4章では、この塊をまるごと useItems というカスタムフックに切り出します。今は形を手に覚えさせるところまでで十分です。
まだ無いもの
取れるまでの間、画面は空です。失敗したときも空のままです。使う人には「壊れている」のと区別が付きません。ここを埋めるのが第3章の仕事になります。
演習
商品一覧を API から出します。カテゴリの絞り込みと売り切れの札も動かします。