[React Query] "Query data cannot be undefined" 해결 방법

문제

더미 데이터를 임시로 fetch하여 불러오는 코드를 사용하던 중 문제가 발생했다.

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["popular"] Error: undefined at Object.onSuccess (webpack-internal:///(sc_server)/./node_modules/@tanstack/query-core/build/lib/query.mjs:263:29) at resolve (webpack-internal:///(sc_server)/./node_modules/@tanstack/query-core/build/lib/retryer.mjs:56:56)

https://curryyou.tistory.com/502
나와 같은 문제를 겪으셨던 위 링크의 글을 참고했지만, 위 방법 중 하나로는 해결할 수 없었다.
문제의 원인은 다른 곳에 있었다. 바로....

.next 폴더의 cache가 수정하기 전 더미데이터에 대한 캐시를 가지고 있었기에 fetch가 이전 데이터를 호출하고 있었던 것이다.

해결 방법

1. .next 폴더의 cache 폴더를 삭제한다.
2. yarn build로 프로젝트를 다시 빌드한다.
3. yarn dev로 실행해보면 정상적으로 최신 데이터를 불러오는 것을 확인할 수 있다.