[react query] 응답 status는 success인데 data가 undefined인 경우

1. 현상

  useQuery 요청 후 서버에서 api 응답 status는 success인데 data가 undefined인 상황

  브라우저 네트워크 로그 확인 후 해당 url로 접근하면 JSON 데이터를 확인할 수 있음(데이터는 정상적으로 받아 옴)

2. 원인

  api 요청에 return 값이 없음

export const apiGet = (req) => {
	axios({
		method: 'get',
		url: '/api/aaa/aaa/aaa',
		params: {
			a : ...,
			b : ...,
		}
	})
  }

  습관적으로 화살표 함수를 만들면서 중괄호를 쳐버렸다. 화살표 함수는 중괄호를 쓰지 않으면 return을 생략할 수 있다.

  () => axios; (O)

  그래서 axios문을 쓸 때 보통 중괄호와 return을 생략하고 써왔는데 습관적으로 중괄호를 쓰는 바람에 응답이 제대로 왔음에도 데이터를 가져오지 못한 것이다.

() => { axios }; (X)

3. 해결

export const apiGet = (req) => 
	axios({
		method: 'get',
		url: '/api/aaa/aaa/aaa',
		params: {
			a : ...,
			b : ...,
		}
	})