react-query warning : query data cannot be undefined. please make sure to return a value other than undefined from your query function.

query data cannot be undefined. please make sure to return a value other than undefined from your query function.

처음에는 쿼리키 문제인줄 알았다. 하지만 쿼리키를 아무리 조작해봐도 해결되지 않아 구글링을 해보니 Promise를 반환하는 react-query의 query가 undefined를 반환하거나 아무것도 반환하지 않을때 나타난다. 비동기 함수가 아닌 동기 함수를 쿼리 함수로 사용헀거나, 비동기 함수에서 await 키워드를 잘못 사용했을 수 있다.

query data cannot be undefined. please make sure to return a value other than undefined from your query function.

query data cannot be undefined 에러 해결 과정

타입을 Promise<any>로 선언해주고 해결되기를 기대했지만 해결되지 않았다.

나는 openAPI를 쓰고 있었는데, 콘솔창에서 잠깐 data.response가 undefined인 상태로 내려오는 순간이 포착되었다.

undefined TypeError가 보여진 후에 react-query에러가 나타난 것이다.

axios가 undefined를 리턴하지 않도록 바꾸어주니 해결되었다.

좌 : 전, 우 : 후

결론

위 경고를 해결하려면 react-query의 반환 data가 undefined를 반환하지 않도록 해야 함

---

그런데 좀 의아했다.

지금까지 data를 받아오기 전에는 항상 undefined가 반환될 수 밖에 없었고(얘는 react-query에서 undefined handling에 대한 글도 씀)

이를 핸들링하기 위해

useEffect(()=>{
 if(data){
    ...
  }
},[])

이런식으로 작성했었는데 왜 갑자기 뜬금없이 에러를 뱉는 것 인지..

 

오늘 tanstack/react-query를 npm install 받긴했는데, 내가 오늘 최신판을 받아서 그런것인가??

 

흠 여튼 의아하다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.