[react-query] onError 가 잡하지 않을때

이슈

어느날 useQuery를 사용하여 500 에러를 잡으려는데 API 코드에서는 분명 catch로 에러가 들어오는데 useQuery onError에서 에러가 잡히지 않았다.

문제의? API 코드

export const getCampaignList = async (page: number, size: number) => {
	try {
		const res = await instance.get('/api/campaigns', {
			params: {
				page: page,
				size: size,
			},
		});
		if (res) {
			return res;
		}
	} catch (error) {
		console.error('getCampaignList', error);
		return error;
	}
};

error이 일어나 catch에서 console.error('getCampaignList', error); 을 보여주고 있다.

useQuery onError 메서드 건너띄는 느낌으로 onError 함수 자체에 들어가지 않고 있었다... onError내부에 console.log(error)를 찍어 놨는데.. 로그가 콘솔에 전혀 보이지 않았다.

문제의? useQuery

아래는 useQuery를 사용하여 api를 호출 하는 부분이다.

const { data } = useQuery(
	['getCampaignList', params],
	() => getCampaignList(params.page, params.size),
	{
		onSuccess(data: AxiosError) {
			
	},
			
		onError(err: AxiosError) {
			//console.log(err)이 아예 안찍힘 건너띄는 느낌...
		},
	},
);

해결

onError 코드를 잡으려면 API코드에서 아래와 같이 try catch문이 없어져야 한다.

export const getCampaignList = async (page: number, size: number) => {
	const res = await instance.get<IUserRes>('/api/campaigns', {
		params: {
			page: page,
			size: size,
		},
	});
	if (res) {
		return res;
	}
};

try catch문이 있을 경우에는 onSuccess로 Error가 들어오더라..
아니면 아래와 같이 useQuery에서 비동기 데이타 함수를 바로 호출 해준다.

const { data } = useQuery(
	['getCampaignList', params],
	async () =>
		await instance.get('/api/campaigns', {
			params: {
				page: params.page,
				size: params.size,
			},
		}),
	{
		onSuccess(data: AxiosError) {
			
		},
		onError(err: AxiosError) {
		
		},
	},
);

같이보면 도움이 될거 같은 참고 사이트
https://lovemewithoutall.github.io/it/react-query-error-usecase/