Level 29
How frequently are you reloading the interface and is rate limiting (throttle) active for the route?
1 like
Apr 5, 2024
3
Level 2
Error Occurrence on Data Retrieval in Interface
Hello! I want to display and retrieve the data, but it shows this error after some time of reloading the interface.A ny help please,i don't know where is the probleme. Here is the error message: ET http://localhost:8000/api/change-requests 429 (Too Many Requests) dispatchXhrRequest @ axios.js?v=d382dd56:1513 xhr @ axios.js?v=d382dd56:1373 dispatchRequest @ axios.js?v=d382dd56:1590 Promise.then (async) _request @ axios.js?v=d382dd56:1854 request @ axios.js?v=d382dd56:1776 Axios. @ axios.js?v=d382dd56:1891 wrap @ axios.js?v=d382dd56:8 fetchChangeRequests @ ChangeRequestList.jsx:34 (anonymous) @ ChangeRequestList.jsx:42 commitHookEffectListMount @ chunk-XBHG3ID7.js?v=d382dd56:16904 commitPassiveMountOnFiber @ chunk-XBHG3ID7.js?v=d382dd56:18152 commitPassiveMountEffects_complete @ chunk-XBHG3ID7.js?v=d382dd56:18125 commitPassiveMountEffects_begin @ chunk-XBHG3ID7.js?v=d382dd56:18115 commitPassiveMountEffects @ chunk-XBHG3ID7.js?v=d382dd56:18105 flushPassiveEffectsImpl @ chunk-XBHG3ID7.js?v=d382dd56:19486 flushPassiveEffects @ chunk-XBHG3ID7.js?v=d382dd56:19443 (anonymous) @ chunk-XBHG3ID7.js?v=d382dd56:19324 workLoop @ chunk-XBHG3ID7.js?v=d382dd56:197 flushWork @ chunk-XBHG3ID7.js?v=d382dd56:176 performWorkUntilDeadline @ chunk-XBHG3ID7.js?v=d382dd56:384 Show 18 more frames Show less ChangeRequestList.jsx:37 Error fetching change requests: AxiosError {message: 'Request failed with status code 429', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
this is the code of the table :
<div className="overflow-x-auto m-12">
<table className=" divide-y divide-gray-200 w-full mx-auto" style={{ borderCollapse: 'separate', borderSpacing: '0 16px' }}>
<thead className="bg-gray-100">
<tr>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Change Name
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Project Name
</th>
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Requested By
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200 shadow-md ">
{Array.isArray(changeRequests) && changeRequests.map((request, index) => (
<tr key={index}>
<td className="px-6 py-4 whitespace-nowrap">{request.changeName}</td>
<td className="px-6 py-4 whitespace-nowrap">{request.projectName}</td>
<td className="px-6 py-4 whitespace-nowrap">{request.userId}</td>
</tr>
))}
</tbody>
</table>
</div>
and this is the code in the controller :
public function index()
{
$changeRequests = ChangeRequest::with('user')->get();
return response()->json($changeRequests);
}
and this is the function in front to show the data :
useEffect(() => {
// Fonction pour récupérer les données des demandes de changement
const fetchChangeRequests = async () => {
try {
const response = await axiosClient.get('/change-requests');
setChangeRequests(response.data); // Met à jour l'état avec les données récupérées
} catch (error) {
console.error('Error fetching change requests:', error);
}
};
// Appelez la fonction pour récupérer les données au chargement du composant
fetchChangeRequests();
},);
Level 2
@gych i dont understand what you say baut in postman show me the data but in front show me a table with lines without data ( just four line ) already i have 4 lines in data base
Level 29
Change the useEfect to this:
I've added two empty square brackets [] in the end as dependency at the bottom of te useEffect, this will make sure that the fetch is only called one time when the component mounts
useEffect(() => {
// Fonction pour récupérer les données des demandes de changement
const fetchChangeRequests = async () => {
try {
const response = await axiosClient.get('/change-requests');
setChangeRequests(response.data); // Met à jour l'état avec les données récupérées
} catch (error) {
console.error('Error fetching change requests:', error);
}
};
// Appelez la fonction pour récupérer les données au chargement du composant
fetchChangeRequests();
}, []);
Please or to participate in this conversation.