문제
더미 데이터를 임시로 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
[React-Query] Query data cannot be undefined 에러 해결 방법
# Query data cannot be undefined 에러 발생 이유 React-Query에서 useQuery를 아래와 같이 사용하면 에러가 발생할 수 있다. const { data, status} = useQuery(['todo', id], () => { fetchByParam(id); }); 만약 이런 에러가 발생
curryyou.tistory.com
나와 같은 문제를 겪으셨던 분의 글을 참고했지만, 위 방법 중 하나로는 해결할 수 없었다.
문제의 원인은 다른 곳에 있었다. 바로....
.next 폴더의 cache가 수정하기 전 더미데이터에 대한 캐시를 가지고 있었기에 fetch가 이전 데이터를 호출하고 있었던 것이다.
해결
- .next 폴더의 cache 폴더를 삭제한다.
- yarn build로 프로젝트를 다시 빌드한다.
- yarn dev로 실행해보면 정상적으로 최신 데이터를 불러오는 것을 확인할 수 있다.
'프론트엔드 > React' 카테고리의 다른 글
| [React Hooks] useEffect와 useLayoutEffect, 그리고 useInsertionEffect (0) | 2023.10.22 |
|---|---|
| [React Hooks] useState (0) | 2023.10.22 |
| [React] CORS 문제 해결법 (1) | 2021.08.23 |
