POSTで送信
取ってくるだけでは店にならない
ここまでは GET だけでした。fleama は出品できないと始まりません。作る側のリクエストが POST です。
仕様書にはこう書いてあります。
{ "method": "POST", "path": "/api/items", "collection": "items", "create": true }/api/items に POST すると、送った中身が商品として足され、id の付いた1件が返ります。
POST の書き方
fetch の第2引数に、送り方を渡します。
const res = await fetch("/api/items", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title, price, category, status: "onSale" }),
});
const created: Item = await res.json();3つとも意味があります。
- method — 何をしに来たか。書かないと GET になり、一覧が返ってきます
- headers — 送る中身が何の形か。JSON で送ると伝えます
- body — 送る中身そのもの。オブジェクトのままでは送れないので
JSON.stringifyで文字にします
body に { title, price } と書いているのは省略記法です。変数名とキー名が同じときは片方を省けます。
フォームの送信は preventDefault から
送信ボタンを押すと、ブラウザは既定でページを丸ごと読み直そうとします。SPA では困るので止めます。
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
...
}フォームの送信イベントは FormEvent です。どこで起きたかを山かっこで添えるのは、前章の ChangeEvent と同じ考え方です。
数はちゃんと数にする
入力欄から取れる値は、数字を打っても必ず文字です。"4800" のまま送ると、価格で並べ替えたときに壊れます。Number(price) で数に直してから送ります。外から入ってきたものを、型のある世界の形に直すのは、前回の取得と同じ話です。
演習
出品フォームから POST で送り、返ってきた商品を画面に出します。