Mock Service Worker(以下MSWと略す)を用いて、基本的な記述が必要なコードについては、以前の位置付けで記述する.
今回は,実際のMSW Handlerコードの記述を試みる.
また,MSWを適用することは容易であるが,タイプスクリプトを適用する上で困難な点もある.
したがって、アプリケーション・タイプ・スクリプトのメソッドも一緒に作成します.

handler.tsの作成

import { rest } from "msw";

export const handlers = [
	// ...
]

handers.tsファイルは基本的にこのように並べられています.
もちろん、配列ではなく1つのハンドルしか作成できませんが、通常は複数のハンドルしか作成できないため、配列しか作成できません.
では、ここで実際にapi moking handlerを追加しましょう.

GET方式

export const handlers = [
	rest.get('/', async (req, res, ctx) => {
		return res(
        	// ...
        )
	}),
]

善誘に従う
このようにハンドルを登録できます.rest方式とgraphql方式では、より熟知したrest方式で行います.
ハンドルがrest方式で記述される場合、restに書き込まれ、GET、POST、PATCH、DELETEおよびrest.get()などのHTTPメソッドが付加される.
Ex) rest.post() , '/'MSWの処理プログラムは基本的に1)あるURL要求を受けたとき2)に実行される動作からなる.
1)したがって,1番目のパラメータは,あるURLに入る際のURLパスである.
2)2番目のパラメータにはその処理ロジックがある.
(次の環境では、reqと書くだけではパス設定が正しくできないという問題があります.なぜか分かりませんが・・・ですので、次の環境ではhttp://localhost:3000/と書かなければなりません.)

export const handlers = [
	rest.get('/', async (req, res, ctx) => {
      
		return res(
        	ctx.json({
              message: "Welcome to 멋쟁이 토마토처럼🍅",
            })
        )
	}),
]

2番目のパラメータとして、コールバック関数のパラメータは、res、ctx、reqである.res一般的な「要求」ロールを処理します.ctxは、応答を返すための関数と見なすことができる.'/'実際には、応答の処理方法の詳細を提供することができる.
上記のコードは、リクエストがmessageルートパスを介して返されると、propertyキーがWelcome to 멋쟁이 토마토처럼🍅であり、値がctx.json()のオブジェクトがjson形式で返されることを示している.
とてもシンプルな構造です.コードに欲しい応答をjson形式で送信するだけでいいです.配列は配列であってもよく、オブジェクトは、任意の値であってもよい.
この点はMSWの強力な機能です.
このURLからのリクエストに対して、私は予想通りの応答をすることができます.しかし、既存のmock dataを準備してプロジェクトを行うのではなく、apiリクエストと応答を実際に送信する過程でmock dataを解放するので、ネットワーク側で模倣するのは違います.
後でバックグラウンドでapiが完了すると(mocking時の応答と同じ)、MSWは特に変更なしにプロジェクトから削除されるとバックエンドコードとともに返されます.

export const handlers = [
	rest.get('/', async (req, res, ctx) => {
      
		return res(
          	ctx.status(200),
          	ctx.delay(2000),
        	ctx.json({
              	message: "Welcome to 멋쟁이 토마토처럼🍅",
            })
        )
	}),
]

さらに、ステータスコードは、非同期論理のように動作させるために、いくつかの遅延(ミリ秒)を追加するためにカスタマイズ可能であってもよい.

POST方式

今回はPOST方式です.ログインの例

export const handlers = [
	rest.post('/login', async (req, res, ctx) => {
      const { email, password } = req.body
      
      const finded = uesrs.find(user => user.email === email)
      if (!finded) {
      	return res(
        	ctx.status(401)
        )
      }
      
      return res(
      	ctx.status(200),
        ctx.delay(2000),
        ctx.json({
        	id: finded.id,
          	email: finded.email,
          	name: finded.name,
          	profileImg: finded.profileImg,
        })
      )
		
	}),
]

簡単なログインはこのような方法で処理できます.
要求が送信部からPOSTに送信されると、そのデータが同時に送信される.
上記の例では、POSTに電子メールとパスワードが送信された場合、Handlerではreqとなる.body.email, req.body.パスワードで使えます.
上のユーザは,ログイン機能を実現するために簡単に準備したデータの山である.
これにより、Eメールが一致しない場合はエラーステータスコードをエクスポートできます.ログインに成功した場合は、必要な応答を再度発行することもできます.

TypeScriptの適用

タイプスクリプトを使用してMSWを記述する場合req.bodyのemailとパスワードのタイプが分からないため、エラーがエクスポートされます.したがって、両方のタイプを指定する必要があります.

interface PostLoginReqBody {
	email: string
  	password: string
}

export const handlers = [
	rest.post<PostLoginReqBody>('/login', async (req, res, ctx) => {
      const { email, password } = req.body
      
      // 이하 동일
	}),
]

このようにrest.postの後にemailとpasswordタイプと書かれたインタフェース、reqを加える.bodyのタイプを示します.
タイプスクリプトはreqですbodyは、どのデータとタイプを推定することができます.

paramsを取り出す

apiリクエストを送信する場合、変化するパラメータを抽出する必要がある場合があります.
次のリクエストがあるとします.

export const handlers = [
	rest.get('/:userId', async (req, res, ctx) => {
      const { userId } = req.params
      
      // ...
	}),
]

上記のように入力パラメータ:userIdMSWのHandler内部がreqである場合.params.userIdで取り出すことができます.
req.paramsはタイプを指定する必要はありません.params.パラメータで来たのは文字列で識別されています.
したがって,paramsに数値タイプを送信しても文字タイプに変換されるので,タイプを適切に変換して使用することができる.
以上、MSWの使い方を簡単にご紹介しました.
これで簡単なapi mokingを使うのに十分です.
それ以外に、詳細な部分は確認MSW公式文書で適用することができる.