msw+expressでGraphQL APIのモックサーバを建てる

以下のGQLクエリに対してレスポンスするモックサーバを建てたい

query tasks {
  tasks {
    collection {
      id
      name
      description
      startAt
      endAt
    }
  }
}

サーバの実装は以下。

faker, msw, @mswjs/http-middleware, express, corsは事前に全部npmでインストールしておく必要あり。

import { faker } from "@faker-js/faker";
import { createMiddleware } from "@mswjs/http-middleware";
import cors from "cors";
import express from "express";
import { HttpResponse, graphql } from "msw";

const buildMockTask = () => {
  // mockのstartAt/endAtが正しい前後関係になるようにfakerで値を生成する
  const from = faker.date.anytime();
  const to = faker.date.future({ refDate: from });

  return {
    id: faker.string.uuid(),
    name: faker.lorem.words(),
    description: faker.lorem.paragraph(1),
    startAt: from,
    endAt: to,
  };
};

const handlers = [
  graphql.query("tasks", () => {
    return HttpResponse.json({
      data: {
        tasks: {
          // とりあえず5個生成しておく。
          collection: Array.from({ length: 5 }).map(() => buildMockTask()),
        },
      },
    });
  }),
];

const app = express();

app.use(
  cors({
    origin: [
      // ここは必要に応じて許可したいホストを追加する
      "http://localhost:4500", 
      "http://localhost:3000",
    ],
    credentials: true,
  }),
);
app.use(express.json());
app.use(createMiddleware(...handlers));
app.listen(8000, () => {
  console.log("running mock server...");
});

@mswjs/http-middleware は createServer というインターフェイスを提供しているのでexpressがなくても良いはずだがTypeScriptの型定義周りにバグがあり、それをts-ignoreで無視して動かそうとするとうまくうごかなかった。

あと結局CORS周りを考慮するならmiddlewareとして扱った方がいい。