Fix Pagination Example for Docs

examples/query/react/pagination/package.json

@@ -16,9 +16,8 @@
     "msw": "^0.40.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-icons": "3.11.0",
+    "react-icons": "^5.0.1",
     "react-redux": "^9.1.0",
-    "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1"
   },
   "devDependencies": {

examples/query/react/pagination/public/mockServiceWorker.js

@@ -1,13 +1,14 @@
+/* eslint-disable */
+/* tslint:disable */
+
 /**
- * Mock Service Worker.
+ * Mock Service Worker (0.40.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
-/* eslint-disable */
-/* tslint:disable */
 
-const INTEGRITY_CHECKSUM = '82ef9b96d8393b6da34527d1d6e19187'
+const INTEGRITY_CHECKSUM = '02f4ad4a2797f85668baf196e553d929'
 const bypassHeaderName = 'x-msw-bypass'
 const activeClientIds = new Set()
 
@@ -82,11 +83,11 @@ self.addEventListener('message', async function (event) {
   }
 })
 
-// Resolve the "master" client for the given event.
+// Resolve the "main" client for the given event.
 // Client that issues a request doesn't necessarily equal the client
 // that registered the worker. It's with the latter the worker should
 // communicate with during the response resolving phase.
-async function resolveMasterClient(event) {
+async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
   if (client.frameType === 'top-level') {
@@ -108,7 +109,7 @@ async function resolveMasterClient(event) {
 }
 
 async function handleRequest(event, requestId) {
-  const client = await resolveMasterClient(event)
+  const client = await resolveMainClient(event)
   const response = await getResponse(event, client, requestId)
 
   // Send back the response clone for the "response:*" life-cycle events.
@@ -220,13 +221,11 @@ async function getResponse(event, client, requestId) {
 
       console.error(
         `\
-[MSW] Request handler function for "%s %s" has thrown the following exception:
+[MSW] Uncaught exception in the request handler for "%s %s":
 
-${parsedBody.errorType}: ${parsedBody.message}
-(see more detailed error stack trace in the mocked response body)
+${parsedBody.location}
 
-This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error.
-If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
+This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
 `,
         request.method,
         request.url,
@@ -241,6 +240,12 @@ If you wish to mock an error response, please refer to this guide: https://mswjs
 
 self.addEventListener('fetch', function (event) {
   const { request } = event
+  const accept = request.headers.get('accept') || ''
+
+  // Bypass server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {
@@ -264,11 +269,22 @@ self.addEventListener('fetch', function (event) {
 
   return event.respondWith(
     handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
       console.error(
-        '[MSW] Failed to mock a "%s" request to "%s": %s',
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
         request.method,
         request.url,
-        error,
+        `${error.name}: ${error.message}`,
       )
     }),
   )

examples/query/react/pagination/src/App.tsx

@@ -1,11 +1,8 @@
-import { Route, Routes } from 'react-router-dom'
 import { PostsManager } from './features/posts/PostsManager'
 
 function App() {
   return (
-    <Routes>
-      <Route path="*" element={<PostsManager />} />
-    </Routes>
+    <PostsManager />
   )
 }
 

examples/query/react/pagination/src/index.tsx

@@ -4,7 +4,6 @@ import App from './App'
 import { api } from './app/services/posts'
 import { ChakraProvider } from '@chakra-ui/react'
 
-import { BrowserRouter } from 'react-router-dom'
 import { worker } from './mocks/browser'
 import { ApiProvider } from '@reduxjs/toolkit/query/react'
 
@@ -14,9 +13,7 @@ worker.start({ quiet: true }).then(() =>
     <React.StrictMode>
       <ApiProvider api={api}>
         <ChakraProvider>
-          <BrowserRouter>
             <App />
-          </BrowserRouter>
         </ChakraProvider>
       </ApiProvider>
     </React.StrictMode>,

yarn.lock

@@ -5444,9 +5444,8 @@ __metadata:
     msw: "npm:^0.40.2"
     react: "npm:^18.1.0"
     react-dom: "npm:^18.1.0"
-    react-icons: "npm:3.11.0"
+    react-icons: "npm:^5.0.1"
     react-redux: "npm:^9.1.0"
-    react-router-dom: "npm:6.3.0"
     react-scripts: "npm:5.0.1"
     typescript: "npm:~4.9"
   languageName: unknown
@@ -24164,6 +24163,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "react-icons@npm:5.0.1"
+  peerDependencies:
+    react: "*"
+  checksum: 10/c4458c643ae32a793ddebc5fa1235c7ec051be1b131205510e8199d15a4c89221a501f95a71fa21c2da93e8dd225290e2e24bb80abd3fb85801e43009e692098
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"