パート 2 – 静的な POST ハンドラ

「＋」ボタンを押して、入力フィールドに「食料品の買い物」と入力し、エンターキーを押してリマインダーを追加してみてください。別のエラーが表示されるはずです。

Failing request

コンソールを確認すると、次のメッセージが表示されます。

Mirage: アプリケーションが '/api/reminders' に POST リクエストを送信しようとしましたが、このリクエストを処理するためのルートが定義されていません。

この POST リクエストをモックしてみましょう。強調表示されている行をサーバーの routes() フックにコピーすることから始めます。

createServer({
  routes() {
    this.get("/api/reminders", () => ({
      reminders: [
        { id: 1, text: "Walk the dog" },
        { id: 2, text: "Take out the trash" },
        { id: 3, text: "Work out" },
      ],
    }))

    this.post("/api/reminders", (schema, request) => {
      let attrs = JSON.parse(request.requestBody)
      console.log(attrs)
      debugger
    })
  },
})

this.post を使用してこのリクエストを処理します。request 引数を使用して、アプリケーションから送信されたデータにアクセスします。request.requestBody プロパティには、リクエスト本文が JSON 文字列として含まれているため、解析後にコンソールにログ出力します。

この新しいコードを保存した後、JavaScript コンソールが開いていることを確認し、もう一度「食料品の買い物」にリマインダーを追加してみてください。DevTools はルートハンドラの debugger ステートメントで停止し、{ text: "食料品の買い物" } オブジェクトがコンソールにログ出力されるはずです。

Failing request

DevTools を使用して、フロントエンドコードと一緒にルートハンドラを記述およびデバッグできることは、Mirage の生産性を高める重要な要素です。

再生ボタンを押して、JavaScript の実行を継続します。Mirage は 201 ステータスコードで正常に応答しますが、アプリはエラーでクラッシュします。

未定義のプロパティ 'id' を読み取ることができません

コンソールを最初のエラーまでスクロールすると、次のようなスクリーンショットが表示されます。

First error

私たちのアプリは、API サーバーが次のようなオブジェクトで応答することを期待しています。

{
  "reminder": {
    "id": 4,
    "text": "Shop for groceries"
  }
}

しかし、現時点ではルートハンドラから何も返していません。

このようなオブジェクトを返してみましょう。リクエストから attrs を使用し、id キーも追加します。既存のリマインダーは ID 1〜3 を使用しているため、ID として数値 4 を使用します。

これが新しいルートハンドラです。これをサーバーにコピーしてください。

this.post("/api/reminders", (schema, request) => {
  let attrs = JSON.parse(request.requestBody)
  attrs.id = 4

  return { reminder: attrs }
})

これで、「食料品の買い物」にリマインダーを追加します。エラーはなくなり、アプリは正しく更新されます。

... 2 番目の ToDo を作成しようとしない限り！ 2 番目のリマインダー「浴室の掃除」を追加してみてください。React はエラーをスローします。

同じキー '4' を持つ 2 つの子が見つかりました。

ID を 4 にハードコーディングする代わりに、インクリメントする数値を使用しましょう。

import { createServer } from "miragejs"

export default function () {
  return createServer({
    routes() {
      this.get("/api/reminders", () => ({
        reminders: [
          { id: 1, text: "Walk the dog" },
          { id: 2, text: "Take out the trash" },
          { id: 3, text: "Work out" },
        ],
      }))

      let newId = 4
      this.post("/api/reminders", (schema, request) => {
        let attrs = JSON.parse(request.requestBody)
        attrs.id = newId++

        return { reminder: attrs }
      })
    },
  })
}

これで、いくつのリマインダーを作成してもアプリは機能します。Mirage のレスポンスを調べると、ルートハンドラから新しいインクリメント ID が返されていることがわかります。

First error

要点

  • Mirage は POST リクエストを処理できます
  • ルートハンドラは、レスポンスを作成するときにリクエストのデータを使用できます
  • ルートハンドラは、一意の ID など、本番サーバーエンドポイントの重要な詳細を忠実に再現する必要があります