[axios]json-serverの配列にpostする書き方がわからない

Question

前提・実現したいこと

json-serverを使ってmockServerを作成してReactでAPIを叩く処理を書いています。
db.jsonで配列で保存しているところに新しい値をpostするにはどうすればいいのでしょうか。
オブジェクトの場合はできるのですが、配列の場合のやり方がわかりません。
ご教授お願いします。

発生している問題・エラーメッセージ

xhr.js:178 POST http://localhost:3000/hoge 500 (Internal Server Error)

該当のソースコード

db.json

"hoge": [
    "HOGE",
    "FUGA",
    "PIYO",
  ]

React

await axios.post("http://localhost:3000/hoge", inputRef.current.value); //対象箇所

Answer 1

• npm | json-server

上記ガイドの中に以下の文言がありました。

A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will result in a 200 OK but without changes being made to the data.

要するにPOSTする時はリクエストヘッダにContent-Type: application/jsonを含めなければならず、POST時のデータはJSONつまりオブジェクト型である必要があるようです。
つまり、db.json側のデータもオブジェクト型の配列にします。

例えばdb.jsonを

{
  "hoge": [
    {"id" : 0, "value" : "HOGE"},
    {"id" : 1, "value" : "FUGA"},
    {"id" : 2, "value" : "PIYO"}
  ]
}

のようにして、送信時は

await axios.post("http://localhost:3000/hoge", {"value" : inputRef.current.value});

のようにすれば正しく動作するのではないでしょうか。