Using interceptors with react-query - reactjs

Question

I have a bunch of custom react-query hooks in my app, e.g.:
export const useItems = () => {
return useQuery(["items"], async () => {
const response = await axios.get("/api/items");
if (response.status !== 200) {
throw response.data.error ?? "Unknown error";
}
return response.data;
});
}
export const useVenueSearch = (placeId) => {
return useQuery(["places", placeId], async () => {
const response = await axios.get(`/api/places/${placeId}`);
if (response.status !== 200 && response.status !== 404) {
throw response.data.error ?? "Unknown error";
}
return response.data;
});
}
...
At any point in time, in any of these custom hooks API calls, the server may decide that the user needs to accept the new Terms and Conditions in order to continue using the product. The server returns a known 4xx response in this case.
What's the best way to centrally handle this 4xx response and update React's state (to show a modal asking the user to accept the Terms and Conditions)?
Bonus question (similar scenario)
Given a bunch of custom mutation hooks, I'd like to introduce an artificial delay so requests never finish before 1000ms passed. What would be a good central place to put this logic?

Answer 1

you can use the interceptor provided by axios and u can even use the retry method of it to hit the API again.
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});
you can read more about it here. https://axios-http.com/docs/interceptors
but apart from this you need to create your own wrapper which will do this part but react-query didn't provide interceptor.