Response middleware

[clicktodev]

I'm working with API endpoints that either return the expected result or return "not allowed to access this resource", I would like to execute a certain piece of code each time I get the "not allowed" response,
I wanna do this without having to check manually for each request I make from the client, Is there a way to create a function that executes whenever a certain response is returned and apply it to the response of all requests made from the client?

[TkDodo]

I would make such a transformation close to where you make the actual network request, in the queryFn. It might also make sense to transform this response to an error by rejecting the Promise. That way, reatct-query will transition to an error state (if that fits your use-case, but "not allowed to access the resource" sounds like a good fit for an error)

[clicktodev]

I ended up using axios interceptors to catch the response of every request I make and that worked out pretty well.
Just define it once during app init and everything's worked well.

[ram0973]

Can you please share an example using axios?

[clicktodev]

@ram0973 this is very old and the code i wrote was def not best practice and very sus
These days you can use Global callbacks for a solution independant from Axios

here's the old code with axios interceptors

import axiosClient from "axiosClient";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useQueryClient } from "@tanstack/react-query";
import { useHistory } from "react-router-dom";
import { toast } from "react-toastify";
import { useAuthDispatch } from "stores/auth.store";

const useAxiosInterceptors = () => {
	const { i18n, t } = useTranslation();
	const queryClient = useQueryClient();
	const authDispatch = useAuthDispatch();
	const history = useHistory();

	useEffect(() => {
		axiosClient.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

				if (response?.data?.authenticate_status === "unauthenticated") {
					authDispatch({
						type: "REMOVE_LOGGED_IN_USER",
					});
				}

				return response;
			},
			function (error) {
				// Any status codes that falls outside the range of 2xx cause this function to trigger
				// Do something with response error
				if (error.response?.status === 500) {
					error.response.data.message = "";
				}
				return Promise.reject(error);
			}
		);
	}, [authDispatch, history, queryClient, t]);
};

export default useAxiosInterceptors;