msw で、 別のエンドポイントのmockに流す。

背景

orval で自動生成したmockのエンドポイントと、
同じエンドポイントだがAccept: test/csv のヘッダーを備えた csv 形式の requset を 明確に分けたかった。

ただ、docを見た限り、passthrough()というメソッドはあったが、404が返ってきていた。

解決

undefined を 返すようにすると、fallthrough という動作をするらしい。
これで別のエンドポイントに渡す、というのが実現できる。

サンプル

const handlers = [
  // override endpoint in other files
  http.get("/users", async ({ request }) => {
    if (request.headers.get("Accept") !== "text/csv") {
      return passthrough(); // 404 response
    }
    return new HttpResponse("some data", {
      status: 200,
      headers: {
        "Content-Type": "text/csv",
      },
    });
  }),

  // auto generated endpoint ( expected passthrough into this )
  http.get("/users", async () => {
    return new HttpResponse(JSON.stringify(getUsersMock()), {
      status: 200,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }),
];

setupWorker(...handlers);

改善

const handlers = [
  // override endpoint in other files
  http.get("/users", async ({ request }) => {
    if (request.headers.get("Accept") !== "text/csv") {
      return;
    }
    return new HttpResponse("some data", {
      status: 200,
      headers: {
        "Content-Type": "text/csv",
      },
    });
  }),

  // auto generated endpoint ( expected passthrough into this )
  http.get("/users", async () => {
    return new HttpResponse(JSON.stringify(getUsersMock()), {
      status: 200,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }),
];

setupWorker(...handlers);
```