fix mswのinitがloderより前に動くように修正 #32

hibohiboo · Feb 28, 2024 · e71defe · e71defe
1 parent 00854c9
commit e71defe
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 62 deletions.
diff --git a/app/src/main.tsx b/app/src/main.tsx
@@ -1,12 +1,15 @@
 import { Provider } from 'jotai';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { initMSW } from '../tests/msw/browser';
 import { RoutesApp } from './router/RoutesApp';
 import { gameCoreStore } from './store/worker/gameCore';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import './index.css';
 
+await initMSW();
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <Provider store={gameCoreStore}>
     <React.StrictMode>

diff --git a/app/src/router/RoutesApp.tsx b/app/src/router/RoutesApp.tsx
@@ -1,8 +1,11 @@
-import { RouterProvider } from "react-router-dom";
-import { router } from ".";
+import { useMemo } from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { createRouter } from '.';
 
 export function RoutesApp() {
-  return (
-    <RouterProvider router={router} future={{ v7_startTransition: true }} />
-  );
+  const memorizedRouter = useMemo(() => {
+    // mswの設定がされた後にrouterを作成する
+    return createRouter();
+  }, []);
+  return <RouterProvider router={memorizedRouter} future={{ v7_startTransition: true }} />;
 }
diff --git a/app/src/router/index.tsx b/app/src/router/index.tsx
@@ -12,66 +12,65 @@ import { TagSummary } from '@kartagraph-types/index';
 import { PrivacyPolicy } from '@kartagraph-ui/components/static/PrivacyPolicy';
 import { Agreement } from '@kartagraph-ui/index';
 import { createBrowserRouter } from 'react-router-dom';
-import { initMSW } from '../../tests/msw/browser';
 import { RootLayout } from './components/RootLayout';
 
-export const router = createBrowserRouter(
-  [
-    {
-      path: '/',
-      loader: async () => {
-        initReport();
-        await initMSW();
-        await gameCoreStore.set(initUserIdAtom);
+export const createRouter = () =>
+  createBrowserRouter(
+    [
+      {
+        path: '/',
+        loader: async () => {
+          initReport();
+          await gameCoreStore.set(initUserIdAtom);
 
-        return null;
-      },
-      element: <Layout />,
-      children: [
-        {
-          index: true,
-          element: <TopPage />,
+          return null;
         },
-        {
-          path: 'tutorial',
-          element: <TutorialPage />,
-        },
-        {
-          path: 'scenario',
-          element: <RootLayout />,
-          children: [
-            {
-              index: true,
-              element: <ScenarioListPage />,
-            },
-            {
-              path: ':uid/:scenarioId',
-              index: true,
-              loader: async ({ params }) => {
-                await initMSW();
-                const data = await fetch(`/scenario/${params.uid}/${params.scenarioId}.json`);
-                const json = await data.json();
-                return JSON.stringify(json);
+        element: <Layout />,
+        children: [
+          {
+            index: true,
+            element: <TopPage />,
+          },
+          {
+            path: 'tutorial',
+            element: <TutorialPage />,
+          },
+          {
+            path: 'scenario',
+            element: <RootLayout />,
+            children: [
+              {
+                index: true,
+                element: <ScenarioListPage />,
+              },
+              {
+                path: ':uid/:scenarioId',
+                index: true,
+                loader: async ({ params }) => {
+                  const data = await fetch(`/scenario/${params.uid}/${params.scenarioId}.json`);
+
+                  const json = await data.json();
+                  return JSON.stringify(json);
+                },
+                element: <ScenarioPage />,
               },
-              element: <ScenarioPage />,
-            },
-            {
-              path: ':scenarioId/result',
-              loader: async ({ params }) => {
-                const data = await fetch(`/v1/api/scenario/${params.scenarioId}/tags`);
-                const json = (await data.json()) as TagSummary[];
-                return json;
+              {
+                path: ':scenarioId/result',
+                loader: async ({ params }) => {
+                  const data = await fetch(`/v1/api/scenario/${params.scenarioId}/tags`);
+                  const json = (await data.json()) as TagSummary[];
+                  return json;
+                },
+                element: <ScenarioResultPage />,
               },
-              element: <ScenarioResultPage />,
-            },
-          ],
-        },
-      ],
+            ],
+          },
+        ],
+      },
+      { path: '/agreement', element: <Agreement /> },
+      { path: '/privacy-policy', element: <PrivacyPolicy /> },
+    ],
+    {
+      basename: `/${basePath}`,
     },
-    { path: '/agreement', element: <Agreement /> },
-    { path: '/privacy-policy', element: <PrivacyPolicy /> },
-  ],
-  {
-    basename: `/${basePath}`,
-  },
-);
+  );
diff --git a/app/tests/msw/browser.ts b/app/tests/msw/browser.ts
@@ -5,7 +5,7 @@ import { handlers } from './handlers';
 export const initMSW = async () => {
   if (import.meta.env.DEV) {
     const worker = setupWorker(...handlers);
-    worker.start({
+    await worker.start({
       serviceWorker: {
         url: `/${basePath}/mockServiceWorker.js`,
       },