## Mock Server Worker

基於 service worker 驅動起來 mock api 服務，並掛載在現有的 vite 環境下，執行 run dev 時就會起起來

## Verison

"msw": "^2.3.1",
"vite": "4.5.0",

## Install

# 0. - yarn install
yarn add msw -D

# 1. - 建置 public/mockServiceWorker.js
# (用於驅動 service worker 如果不下這個 mockServiceWorker.js 空白就無法正常驅動)
npx msw init --save

## 新增資料夾

* mocks
    * apis
        * demo.js
    * browser.js
    * handleer.js
    * utils.js

## apis/demo.js

import { http, HttpResponse } from 'msw';
import { getDomain } from '@/mocks/utils';

export const mockDemoApi = [
	http.get(getDomain('/api/v3/users'), () => {
		return HttpResponse.json({
			users: [
				{
					id: 1,
					name: 'Kanahei'
				},
				{
					id: 2,
					name: 'piske'
				},
				{
					id: 2,
					name: 'usagi'
				}
			]
		});
	}),
	http.post(getDomain('/api/v3/user'), async ({ request }) => {
		const body = await request.json();
		return HttpResponse.json({
			status: 'success',
			user: body
		});
	}),
	http.put(getDomain('/api/v3/user'), async ({ request }) => {
		const body = await request.json();
		return HttpResponse.json({
			status: 'success',
			user: body
		});
	}),
	http.delete(getDomain('/api/v3/user/*'), () => {
		return HttpResponse.json({
			status: 'success'
		});
	})
];

export default mockDemoApi;

## handlers.js

import { mockDemoApi } from './apis/demo';

export const handlers = [...mockDemoApi];

## browser.js

import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

## 在 main 或 indedx 進入 entry 中掛上啟動函式

export const useMockServiceWorker = async () => {
	// only use in development
	if (import.meta.env.VITE_APP_NODE_ENV !== 'dev.local') {
		return;
	}

	const { worker } = await import('./browser.js');
	return worker.start({
		onUnhandledRequest() {
			// pass on unhandled requests
			return;
		}
	});
};

### main.js or index.js

useMockServiceWorker().then(() =>
	root.render(
		<React.StrictMode>
			<ThemeProvider theme={theme}>
				<Provider store={store}>
					<RouterProvider router={rootRouter} />
				</Provider>
			</ThemeProvider>
		</React.StrictMode>
	)
);

## Running
dev 時打開 Console 顯示 [MSW] Mocking enabled. 及成功
Application 中 service worker 已經順利啟動