[errorLog] Query data cannot be undefined. Please make sure to return a value other than undefined from your query function

🚨 발생한 문제와 상황

게시글 좋아요 구현중 발생한 문제.

const { data: likedId } = useQuery({
    queryKey: ['liked', id, loginUser],
    queryFn: async () => {
      // like 테이블에서 feedID, 로그인한 userId와 일치하는 문서 있는지 확인
      // ! boolean이니까 기본적으로 문서는 하나뿐이다
      // 문서가 있으면 true, 없으면 false.
      const q = query(
        collection(db, 'like'),
        where('feedId', '==', id),
        where('userId', '==', loginUser)
      )
      const querySnapshot = await getDocs(q)
      const likeId = querySnapshot.docs.map((doc) => doc.id)[0]
      return likeId
    },
  })

🤔 문제의 원인 파악하기

React-Query(Tanstack-Query)에서 useQuery를 사용하면서 문제가 생긴 것 같았다. 그래서 먼저 콘솔에 뜬 에러 내용을 읽어보았다. 내용을 요약해보면 쿼리 데이터를 찾을 수 없음 / undefined 말고 다른 값을 리턴하게 해야한다 / 문제가 생긴 쿼리키 였다. 

문제의 원인을 찾아보면 결과 useQuery에서 리턴하는 데이터가 Promise가 아니기때문에 생기는 에러라는걸 발견하게 되었다. likedId에서 [0]으로 값을 지정해준것이 문제가 된것같다.

🏃‍♀️ 시도해본 방법

const likeId = querySnapshot.docs.map((doc) => doc.id)

 

그래서 코드를 수정하고 특정한 값을 리턴해주는게 아니라 그냥 가공하기 전의 값을 리턴해줬음.

 

✅ 결론

오류 해결!

 

 

 

참고 링크

https://velog.io/@paperkeem/React-Query-Query-data-cannot-be-undefined-에러