MSWのハンドラーの取得を取り回ししやすくする

ハンドラを設定する際にステータスコードやエンドポイントってあんまり変えないし、変えたとしてもStory毎ですよね。
毎回設定するのも億劫だったので、あんまり労力かけずに取り回ししやすくするようにしています。

こんな感じ

type StatusParams = Parameters<RestContext['status']>;
const defaultMyApiResponse: MyApiResponse = {
  hoge: 'hoge'
}

export const getHandleMyApi = (
  params: Partial<MyApiResponse> = {},
  status: StatusParams = [200, undefiend],
  endpoint: `/endpoint`
) => {
  const responseResolver = ResponseResolver<MockedRequest, typeof restContext, MyApiResponse> = (
    _,
    res,
    ctx
  ) => {
    const [statusCode, statusText] = status;
    return res(ctx.status(statusCode, statusText), ctx.json({ ...defaultMyApiResponse, ...params}));
  }
  return rest.get(endpoint, responseResolver)
}

これをPreviewで定義しておいて、Story毎に設定したい場合は必要な値を変えるだけですむ感じです。

export const MyStory1: Story = {
  parameters: {
    msw: {
      handlers: [getHandleMyApi({hoge: "fuga"})]
    }
  }
}

export const MyErrorStory: Story = {
  parameters: {
    msw: {
      handlers: [getHandleMyApi({}, [404])]
    }
  }
}

おまけ：ResponseResolverを柔軟に取得する案

export const getResponseResolver =
<T>(
  params: Partial<T> = {},
  status: StatusParams = [200, undefiend],
): ResponseResolver<MockedRequest, typeof restContext, Partial<T>> =>
(_, res, ctx) => (
  const [statusCode, statusText] = status;
  return res(ctx.status(statusCode, statusText), ctx.json(params));
);

const responseResolver = getResponseResolver<MyApiResponse>({hoge: "hoge", [202]});

どこかで使えるかもしれない。