パート 1 – 静的な GET ハンドラ

インターフェースからわかるように、Reminders アプリはデータを取得するために API リクエストを試みていますが、リクエストは失敗しています。

Failing request

これは、アプリが通信する API サーバーがないためです。Mirage を使用して、失敗する API リクエストをモックしましょう。

エディタで src/server.js ファイルを開き、miragejs から createServer をインポートし、新しいサーバーを作成するデフォルト関数をエクスポートします。

// src/server.js
import { createServer } from "miragejs"

export default function () {
  createServer()
}

index.js でこの関数をインポートして実行しますが、独自のアプリでは好きなように設定できます。

アプリに戻り、JavaScript コンソールを開くと、Mirage からのエラーが表示されます。

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

これは Mirage が実行中で、Reminders アプリがモックされていない GET リクエストを行っていることを意味します。

routes() フックを使用してモックできます。強調表示されたコードをコピーして、アプリのサーバーを更新します。

import { createServer } from "miragejs"

export default function () {
  createServer({
    routes() {
      this.get("/api/reminders", () => ({
        reminders: [],
      }))
    },
  })
}

routes() フックはルートハンドラを定義する方法であり、this.get() メソッドを使用すると GET リクエストをモックできます。最初の引数は処理する URL（/api/reminders）で、2 番目の引数はアプリにデータで応答する関数です。

アプリがリロードされ、「完了しました！」というメッセージが表示されます。

All done

コンソールを開くと、Mirage が 200 ステータスコードとハンドラからのオブジェクトでリクエストを処理したことがわかります。

レスポンスにデータを追加しましょう。

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

アプリはこのデータを表示するようになりました。

All done

おめでとうございます – 最初の Mirage ルートハンドラを作成しました！

要点

  • Mirage はブラウザで実行されるため、管理する新しいターミナルプロセスはありません。
  • Mirage からデータを返すのは、フロントエンドコードを書くのと同じくらい速くて簡単です。
  • Mirage からデータを使用するためにアプリケーションコードを変更することはありません。アプリは実際のネットワークと通信していると考えています。