パート 3 – 動的ハンドラー

これまでに2つのAPIルートをモック化しましたが、問題があります。

「食料品の購入」という新しいリマインダーを保存し、ヘッダーの「About」リンクをクリックしてから、「Reminders」をクリックしてホームに戻ってみてください。

元の3つのリマインダーは再読み込みされますが、作成した新しいリマインダーはリストにありません。

これは、GETハンドラーが現在*静的*であり、実行されるたびに同じ3つのハードコードされたリマインダーを返すためです。

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

アプリケーションデータの*参照整合性*が壊れており、本番APIと同じように動作しなくなりました。

Mirageのデータ層を使用してこれを修正しましょう。

まず、リマインダーモデルを定義します。これにより、Mirageはメモリ内データベースにremindersコレクションを作成します。

import { createServer, Model } from "miragejs"

export default function () {
  createServer({
    models: {
      reminder: Model,
    },

    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 }
      })
    },
  })
}

これで、GETルートハンドラーを更新して、リクエスト時にデータベース内のすべてのリマインダーを返すことができます。これは実際のサーバーと同じ動作です。

import { createServer, Model } from "miragejs"

export default function () {
  createServer({
    models: {
      reminder: Model,
    },

    routes() {
      this.get("/api/reminders", (schema) => {
        return schema.reminders.all()
      })

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

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

すべてのルートハンドラーに渡される最初の引数であるschema引数は、Mirageのデータ層と対話するための主要な方法です。

保存してアプリをリロードすると、「All done!」メッセージが再び表示されます。これは、Mirageのデータベースが空の状態から始まるためです。

次に、POSTハンドラーを更新して、Mirageのデータ層に新しいリマインダーモデルを作成しましょう。

import { createServer, Model } from "miragejs"

export default function () {
  createServer({
    models: {
      reminder: Model,
    },

    routes() {
      this.get("/api/reminders", (schema) => {
        return schema.reminders.all()
      })

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

        return schema.reminders.create(attrs)
      })
    },
  })
}

ここでは、以前と同様にリクエストからattrsを取得していますが、schemaのcreateメソッドを使用して新しいリマインダーモデルを作成しています。

変更を保存してリマインダーを作成しようとすると、POST APIルートが正常に応答することがわかります。コンソールでレスポンスを検査すると、Mirageのデータ層が各新しいリマインダーに自動インクリメントIDを自動的に割り当てていることがわかります。

リマインダーを作成した後、「About」をクリックしてから「Reminders」をもう一度クリックします。作成したすべてのリマインダーが再び表示されます！バグを修正しました。

すべてのルートハンドラーがMirageのデータ層を読み書きしているため、APIの参照整合性を復元し、アプリは本番環境と同様に動作します.

要点

Mirageには、モックサーバーデータの単一の情報源として機能するデータベースがあります。
ルートハンドラーは、ルートハンドラー全体でモックデータの参照整合性を維持するために、schema引数を介してデータベースを読み書きする必要があります。

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

パート 4 – シード