API Requests Being Sent Four Times: Need Assistance Resolving Issue
Hello,
I am using the Metronic React Demo1 theme for my project. However, when there is a server issue such as a 501 error or any other issue, the API is automatically sending requests four times. I'm unsure why this is happening or which part of the code is responsible for it. I suspect that Metronic might have set a retry_config somewhere in the code.
Please assist me in resolving this issue. I don't want the API requests to be sent multiple times if errors occur. How can I fix this?
Replies (5)
Hi,
Could you please provide us with more context about your issue and which page you are using?
By default, we do not have any automatic request resend, please ensure that you trigger your request one time, you might get multiple requests due to your component rerender.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I am currently using the Metronic React Demo1 theme. Within this theme, there's a 'user-management' page. I made a modification to the 'getUsers' API URL within this page, by appending '/sd' to the query string, intending to alter the behavior. However, after this change, the API appears to be called four times consecutively. It's worth noting that I haven't made any alterations to the Metronic theme's original code. Feel free to replicate the scenario.
const getUsers = (query: string): Promise<UsersQueryResponse> => {
return axios
.get(`${GET_USERS_URL}?${query}/sd`) // Appended "/sd" to the query for API testing
.then((response: AxiosResponse<UsersQueryResponse>) => response.data);
};Hi,
Thank you for clarifying this.
Unfortunately, we still were not able to reproduce this problem in the latest Metronic version.
Do you have the same problem on our preview page?
https://preview.keenthemes.com/metronic8/react/demo1/apps/user-management/users
Also, please let us know if there are any specific steps on how we can reproduce this.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I believe there could be multiple reasons for this issue. Upon investigation, I've found that we are using React Query for making API requests. It seems that setting the retry count in the QueryResponseProvider.tsx component to 0 might resolve the issue. This would involve adding the following configuration:
{cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false, retry: 0}However, I'm not entirely certain if this approach is correct. Can you please provide feedback or suggest alternative solutions?
Hi,
Setting retries to 0 will disable request retry when a request fails if it fixed your problem then probably your app was making 4 requests due to the first 3 requests failing.
You can use retry:0, just keep in mind that if the request fails then React-Query will not be trying to make a new request.
You can read more about this property in the official React-Query documentation.
https://tanstack.com/query/v4/docs/framework/react/guides/query-retries
Regards,
Lauris Stepanovs,
Keenthemes Support Team
