[react-query] getQueryData undefined error 해결

에러내용

react-query에서 getQueryData를 했을 경우 원하는 queryKey의 데이터의 data를 못 찾아 undefined를 띄우는 경우가 있다. 난 분명 제대로 된 key 값을 넣었는데..?

내가 찾은 해결책을 공유하고자 한다.

getQueryData?

공식문서의 설명에 따르면 사용법은 다음과 같다.

// getQueryData기존 쿼리의 캐시된 데이터를 가져오는 데 사용할 수 있는 동기 함수입니다. 
쿼리가 존재하지 않으면 undefined반환됩니다.

const data = queryClient.getQueryData(queryKey)

queryKey가 존재하지 않으면 undefined를 반환한다고 한다.

해결법

1. 최상위 컴포넌트에서 react-query 설정 살펴보기

react-query 설정 공식문서
최상위 컴포넌트(next.js의 경우에는 _app.ts)에서 react-query 설정을 해줄 때 컴포넌트 전체를 감싸주었는 지 체크를 해줍니다.

내가 분명히 해준 것 같아도 최상단에 해준 건지 new new QueryClient()로 새 객체를 할당해준 게 맞는지 등을 다시 한 번 체크해봅니다.. (react-query의 undefined 관련 에러의 큰 원인 중 하나.. 경험담임)

2. queryKey 확인하기(필자가 해결한 방법)

보통은 queryClient.invalidateQueries(queryKey)처럼 queryKey에 해당하는 값을 무효화 시키고 다시 갱신해주기 때문에 queryKey의 일부만 넣으면 동작한다고 착각할 수 있는데

getQueryData의 경우는 queryKey 전체가 일치해야 정확한 데이터값을 불러오기 때문에 전체 queryKey가 일치하는 지 확인해본다.
(사실 invalidateQueries도 정확한 무효화를 위해 queryKey를 정확히 입력해주는 게 좋다)

후기

생각보다 에러를 발견하기까지 시간이 소요됐는데, 해결한 뒤 사수분에게 말씀드리니 사수분은 이미 알고 계셨다. 내가 묻지 않고 발견해서 해결한 것에 대해 뿌듯함을 느끼면서 좀 더 디테일한 공부가 필요함을 느낀 순간이었다.