'How to solve MSW random 404 error with React
I have started using MSW to mock the BE, but randomly it fails to fetch data when I save changes. Dont' really know how to debug it, since it's very random

Api routing functions
import Api from './Api';
export default class BrandsAPIs extends Api {
getAllBrands(accessToken) {
return this.instance.get('brands', this.constructor.addAuthorizationHeader(accessToken));
}
}
browser.js
import { setupWorker, rest } from 'msw';
import brands from './getBrands.json';
const worker = setupWorker(
rest.post('/authentication', (req, res, ctx) => res(ctx.json({
accessToken: 'Freebee',
user: 'Andrea',
}))),
rest.get('/brands', (req, res, ctx) => res(ctx.json(brands))),
);
worker.start();
react page
import React, { useState, useEffect } from 'react';
import { BrandsAPIsSingleton } from '../../modules/api';
// components
import BrandsMainTable from './table/BrandsMainTable';
export default function Main() {
const [isLoading, setIsLoading] = useState([]);
const [brands, setBrands] = useState([]);
useEffect(() => {
setIsLoading(true);
BrandsAPIsSingleton.getAllBrands()
.then((r) => {
setBrands(r.data);
setIsLoading(false);
}).catch((error) => {
setIsLoading(false);
console.log(error);
});
}, []);
if (isLoading) {
return <div>Loading...</div>;
}
return (
<BrandsMainTable data={brands} />
);
}
Anybody else had this problem?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
