feat: tanstack react-query example add

minsgy · Jun 9, 2024 · 29c0f10 · 29c0f10
1 parent 4d48163
commit 29c0f10
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 59 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,23 +10,27 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "msw-devtools": "link:../",
+    "@types/node": "20.12.7",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "@types/node": "20.12.7",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "msw": "2.2.13",
+    "msw-devtools": "link:../",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.40.1",
+    "react-json-view-lite": "^1.4.0"
   }
 }
diff --git a/example/pnpm-lock.yaml b/example/pnpm-lock.yaml
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,31 +1,48 @@
+import { useQuery } from "@tanstack/react-query"
+import { JsonView, darkStyles } from "react-json-view-lite"
 import "./App.css"
+import { useState } from "react"
 
 function App() {
-  const testFetchVite = async () => {
-    try {
-      const response = await fetch("https://api.example.com/user", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      })
-      const data = await response.json()
-      console.log(data)
-    } catch (error) {
-      console.error(error)
-    }
-  }
+  const [error, setError] = useState<string | null>(null)
+  const { data } = useQuery({
+    queryKey: ["test"],
+    queryFn: async () => {
+      try {
+        const response = await fetch("https://json-test.com/v1/user")
+        setError(null)
+        return response.json()
+      } catch (e) {
+        const error = e as Error
+        setError(error.message)
+      }
+    },
+    gcTime: 0,
+    staleTime: 0,
+  })
 
   return (
     <>
       <div></div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => testFetchVite()}>Test Fetch Vite</button>
+      <h1>MSW Devtools</h1>
+      <div
+        style={{
+          textAlign: "left",
+        }}
+      >
+        <JsonView style={darkStyles} data={data} />
+        {error && (
+          <p
+            style={{
+              color: "red",
+              fontSize: "1.2rem",
+              fontWeight: "bold",
+            }}
+          >
+            {error}
+          </p>
+        )}
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
   )
 }

diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -1,9 +1,11 @@
 import { MSWDevtools } from "msw-devtools"
 import "msw-devtools/styles"
+import "react-json-view-lite/dist/index.css"
 
 import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App.tsx"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import "./index.css"
 
 const isDev = process.env.NODE_ENV === "development"
@@ -17,12 +19,22 @@ const prepareWorker = async () => {
   return undefined
 }
 
+const queryClient = new QueryClient()
 prepareWorker().then((worker) =>
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-      <MSWDevtools worker={worker} isEnabled={isDev}>
-        <App />
-      </MSWDevtools>
+      <QueryClientProvider client={queryClient}>
+        <MSWDevtools
+          worker={worker}
+          isEnabled={isDev}
+          onRouteUpdate={() => {
+            console.log("[MSW Devtools] Route updated")
+            queryClient.resetQueries()
+          }}
+        >
+          <App />
+        </MSWDevtools>
+      </QueryClientProvider>
     </React.StrictMode>
   )
 )
diff --git a/example/src/mocks/browser.ts b/example/src/mocks/browser.ts
@@ -1,5 +1,5 @@
 // src/mocks/browser.js
-import { setupWorker } from "msw/browser";
-import { handlers } from "./handlers";
+import { setupWorker } from "msw/browser"
+import { handlers } from "./handlers"
 
-export const worker = setupWorker(...handlers);
+export const worker = setupWorker(...handlers)
diff --git a/example/src/mocks/handlers.ts b/example/src/mocks/handlers.ts
@@ -3,10 +3,10 @@ import { http } from "msw-devtools"
 
 export const handlers = [
   http
-    .get("https://api.example.com/user", () => {
+    .get("https://json-test.com/v1/user", () => {
       return HttpResponse.json({
-        firstName: "John",
-        lastName: "Maverick",
+        firstName: "zzz",
+        lastName: "zzz",
       })
     })
     .presets([
@@ -33,23 +33,4 @@ export const handlers = [
         },
       },
     ]),
-  http.post("https://api.example.com/user", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.put("https://api.example.com/user/:id", () => {
-    return HttpResponse.json({ success: true })
-  }),
-
-  http.delete("https://api.example.com/user/:id", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.patch("https://api.example.com/user/:id", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.options("https://api.example.com/user", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.head("https://api.example.com/user", () => {
-    return HttpResponse.json({ success: true })
-  }),
 ]
diff --git a/package.json b/package.json
@@ -84,7 +84,6 @@
     "react-dom": ">=18"
   },
   "engines": {
-    "node": ">=20.11.1",
-    "pnpm": ">=9.0.6"
+    "node": ">=20.11.1"
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -4,4 +4,4 @@ import { MSWDevtools } from "./app/MSWDevtools"
 export { MSWDevtools }
 export * from "./types"
 export * from "./constants"
-export * from "./shared/lib/http"
+export * from "./shared/lib"
diff --git a/src/types.ts b/src/types.ts
@@ -20,10 +20,22 @@ export interface MSWDevtoolsProps extends ComponentPropsWithoutRef<"div"> {
    */
   children?: React.ReactNode
   /**
-   * The position of the toolbar.
-   * @default 'top'
+   * The onRouteUpdate field is a callback function that will be executed every time an MSW Route is updated and reflected.
+   * This allows the execution of a callback function whenever MSW handlers are updated.
+   * @example
+   * // React Query example
+   * const queryClient = useQueryClient()
+   *  return (
+   *  <MSWDevtools
+   *   onRouteUpdate={() => {
+   *       queryClient.resetQueries()
+   *    }}
+   *  >
+   *   <App />
+   *  </MSWDevtools>
+   * )
    */
-  position?: "top" | "bottom"
+  onRouteUpdate?: (routes: EnhancedDevtoolsRoute[]) => void
 }
 
 export type Setting = "mode" | "delay" | "status" | "isHidden"
@@ -50,5 +62,6 @@ export type DevtoolsRoute = {
 }
 
 export type EnhancedDevtoolsRoute = DevtoolsRoute & {
-  isSkip?: boolean
+  enabled?: boolean
+  isHidden?: boolean
 }