Vue Query: global error handling and token generation

[pbrzosko]

Hi,

forgive me if I have missed that in the docs, but how can I register global error handling and global token generation for all my queries. I know there is a global config for vue-query and an onError callback, but how I can achieve that with Orval?

Is the custom http client the only solution here?

[melloware]

Typically yes a custom Mutator: https://orval.dev/guides/custom-axios

for instance in my app once I login an get an API key or session ID my Mutator then adds this to every single call from Orval. I use Axios but fetch i believe has a similar mutator.

import Axios, { AxiosError, RawAxiosRequestConfig } from "axios";

export const AXIOS_INSTANCE = Axios.create({ baseURL: import.meta.env.REACT_APP_API_SERVER! });

export const useAxiosMutator = <T>(): ((config: RawAxiosRequestConfig) => Promise<T>) => {
	return (config: RawAxiosRequestConfig) => {
		const source = Axios.CancelToken.source();
		const promise = AXIOS_INSTANCE({
			...config,
			cancelToken: source.token,
		}).then(({ data }) => data);

		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-ignore
		promise.cancel = () => {
			source.cancel("Query was cancelled by React Query!");
		};

		return promise;
	};
};

export default useAxiosMutator;

// In some case with react-query and swr you want to be able to override the return error type so you can also do it here like this
export type ErrorType<Error> = AxiosError<Error>;

here is a full working example where I map to my own HttpProblem error type.

https://github.com/melloware/quarkus-primereact/blob/main/src/main/webui/src/service/AxiosMutator.ts

[pbrzosko]

alright, will try that, thanks

[vatte21]

Thank you, for note about overriding Error type to a custom one "export type ErrorType = AxiosError;"
Thats what i was looking for,

[melloware]

@vatte21 glad I could help!