パート7 – シリアライザー

Mirageには、APIに一般的に適用される変換、例えば、JSONオブジェクトのキーがキャメルケースかスネークケースか、または関連データがレスポンスにどのように含まれるかなどをエミュレートするのに役立つシリアライザー層もあります。

私たちのリマインダーアプリには、これまでのモック化されたレスポンスのために見ていなかったもう一つの機能があります。「すべて」画面のリマインダーには、所属するリスト（もしあれば）が表示されるはずです。

これを実現するために、私たちのアプリは、/api/remindersへのGETリクエストが、各リマインダーのリストを以下のように埋め込んで返すことを期待しています。

// GET /api/reminders
{
  "reminders": [
    { "id": "1", "text": "Walk the dog" },
    { "id": "2", "text": "Take out the trash" },
    { "id": "3", "text": "Work out" },
    { "id": "4", "text": "Do taxes", "list": { "name": "Home", "id": "1" } },
    { "id": "5", "text": "Visit bank", "list": { "name": "Work", "id": "2" } }
  ]
}

シリアライザーは、Mirageのデータ層を活用して、このような複雑なAPIレスポンスをモックするのに役立ちます。どのように機能するか見てみましょう。

RestSerializerをインポートし、それをReminderモデルのシリアライザーとして設定し、関連するリストを埋め込むように指示します。

import {
  createServer,
  Model,
  hasMany,
  belongsTo,
  RestSerializer,
} from "miragejs"

export default function () {
  createServer({
    serializers: {
      reminder: RestSerializer.extend({
        include: ["list"],
        embed: true,
      }),
    },

    // rest of server
  })
}

この新しいserializersキーは、モデルごとにシリアライザーを定義できるオプションです。すべてのレスポンスに一般的な変換を適用したい場合は、applicationシリアライザーを設定することもできます。

私たちが使用しているRestSerializerクラスは、Mirageに含まれる3つの名前付きシリアライザーの1つであり、多くのREST APIに適した出発点です。RailsのようなAPI用のActiveModelSerializerと、JSON:API仕様に従うAPI用のJSONAPISerializerもあります。

最後に、RestSerializerに2つのカスタマイズを追加しました。

まず、include: ['list']は、MirageがルートハンドラーのレスポンスでReminderモデルを検出するたびに、関連付けられたリスト（もしあれば）を含めるように指示します。

次に、embed: trueは、Mirageに含めるリソースをどのようにシリアライズするかを指示します。デフォルトではサイドロードされますが、このAPIは、上記のJSONスニペットに示すように、埋め込まれることを期待しています。

これらの変更を追加したら、「すべて」ページでアプリをリフレッシュすると、リストに属するリマインダーの横にリストラベルが表示されるはずです。

UIを使用して特定のリストに対してより多くのリマインダーを作成し、[すべて]に戻ってみてください。新しいデータにラベルが表示されるはずです。

要点

Mirageのシリアライザー層は、JSONペイロードを変換するために使用できます。
一般的なシリアライザーの懸念事項には、JSONペイロードの形状の変更（例えば、ルートにキーを含めるかどうか）、複合語のフォーマットに関する規則（例えば、キャメルケースとスネークケース）、および関連データを含める方法とタイミングなどがあります。

パート6 – リレーションシップ

パート8 – ファクトリー