React-Query Query data cannot be undefined 해결 방법 및 Promise에 대해

React query에서 useQuery를 사용하던중 다음과 같은 에러가 발생했다

Query data cannot be undefined

 

다음 에러는 useQuery에 등록한 함수가 Promise를 반환하지 않아서 이런 에러가 난 것이다.

 

해결 방법

1. 화살표 함수로 바로 리턴해준다.

const { data, status } = useQuery(['test', id], () => fetchTest(id));

2. 중괄호 내부에서 명시적으로 return 문을 써준다.

const { data, status } = useQuery(['todos', id], () => {
    return fetchTest(id); 
});

또한 async 와 await으로 해결 할수도 있다.

 

 

뜬금 없지만 기초를 잡기 위해 Promise에 대해 알아보자...

 

 

---

Promise 

Promise는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다. 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리다. 

Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

 

프로미스의 3가지 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

프로미스 처리 흐름 - 출처 : MDN