学習の目的と背景
実務で本番用のAPIを叩かずにモックAPIを使ってPOSTやPUT処理を実装する必要が出てきたため、試して実務で使えるようにしたいと思った
使用技術スタック
- React
- TypeScript
- msw (Mock Service Worker) 2.7.3
- axios
躓いたポイント
- public ディレクトリの下に mockServiceWorker.js を置く必要があったが、作成しておらず動作しなかった
- 公式ドキュメントを確認する前に、ChatGPTに質問しながら試していたが、古いバージョンの話をされていたためエラーの原因を特定するまで時間がかかった
得られた気づきと学び
- 最近はChatGPTなどのおかげで新しいことに対しての学習ハードルは低くなったと感じていますが、全てを鵜呑みにせず公式ドキュメントも確認することが大切
- POSTやPUTを叩いた後にresponseが返ってきて、その結果をフロントに反映させる流れは理解していましたが、フロントからPOSTしたリクエストボディに対してバックエンドで追加の情報(idなど)を与えてフロントにレスポンスとしてreturnできるっていうことを知らなくてこれはすごいと思いました。フロント側でidなど必要な情報を渡した上でPOSTするのだとずっと思っていたので気づけてよかったです。
- stateで管理しているデータとレスポンスの型を揃えておけば、responseされたデータを使ってそのままstateの更新が可能となる。(例 todoリスト全体の状態を管理するstate変数とPOSTしてreturnされるレスポンスの型を揃えておく)