-
- This example does not work in production, as MSW is not intended for
- use in production. In a real-world app, your request will hit the
- actual backend instead.
-
-
@@ -44,21 +32,12 @@ export default function Home({ book, inProduction }) {
export async function getServerSideProps() {
// Server-side requests are mocked by `mocks/server.js`.
- // In a real-world app this request would hit the actual backend.
- try {
- const res = await fetch('https://my.backend/book')
- const book = await res.json()
+ const res = await fetch('https://my.backend/book')
+ const book = await res.json()
- return {
- props: {
- book,
- },
- }
- } catch (error) {
- return {
- props: {
- inProduction: true,
- },
- }
+ return {
+ props: {
+ book,
+ },
}
}
diff --git a/examples/with-msw/public/mockServiceWorker.js b/examples/with-msw/public/mockServiceWorker.js
index e94d7a8f30569437a33ff6916aee00133953005e..d4d30cc9a749c1cae2df39ab705e3f019229e1e7 100644
--- a/examples/with-msw/public/mockServiceWorker.js
+++ b/examples/with-msw/public/mockServiceWorker.js
@@ -7,7 +7,7 @@
/* eslint-disable */
/* tslint:disable */
-const INTEGRITY_CHECKSUM = 'd1e0e502f550d40a34bee90822e4bf98'
+const INTEGRITY_CHECKSUM = '65d33ca82955e1c5928aed19d1bdf3f9'
const bypassHeaderName = 'x-msw-bypass'
let clients = {}
@@ -74,11 +74,22 @@ self.addEventListener('message', async function (event) {
}
})
-self.addEventListener('fetch', async function (event) {
+self.addEventListener('fetch', function (event) {
const { clientId, request } = event
const requestClone = request.clone()
const getOriginalResponse = () => fetch(requestClone)
+ // Bypass navigation requests.
+ if (request.mode === 'navigate') {
+ return
+ }
+
+ // Bypass mocking if the current client isn't present in the internal clients map
+ // (i.e. has the mocking disabled).
+ if (!clients[clientId]) {
+ return
+ }
+
// Opening the DevTools triggers the "only-if-cached" request
// that cannot be handled by the worker. Bypass such requests.
if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
@@ -89,20 +100,15 @@ self.addEventListener('fetch', async function (event) {
new Promise(async (resolve, reject) => {
const client = await event.target.clients.get(clientId)
- if (
- // Bypass mocking when no clients active
- !client ||
- // Bypass mocking if the current client has mocking disabled
- !clients[clientId] ||
- // Bypass mocking for navigation requests
- request.mode === 'navigate'
- ) {
+ // Bypass mocking when the request client is not active.
+ if (!client) {
return resolve(getOriginalResponse())
}
// Bypass requests with the explicit bypass header
if (requestClone.headers.get(bypassHeaderName) === 'true') {
const modifiedHeaders = serializeHeaders(requestClone.headers)
+
// Remove the bypass header to comply with the CORS preflight check
delete modifiedHeaders[bypassHeaderName]