# Query data cannot be undefined 에러 발생 이유
React-Query에서 useQuery를 아래와 같이 사용하면 에러가 발생할 수 있다.
const { data, status} = useQuery(['todo', id], () => {
fetchByParam(id);
});
만약 이런 에러가 발생 했다면...
Error: Query data cannot be undefined at Object.onSuccess ....
이유는 useQuery에 등록한 함수가 Promise를 반환하지 않아서이다.
분명히 Promise 를 반환하는 fetch나 axios 함수를 썼겠지만,
호출만하고 리턴은 하지 않았을 수 있다.
# Query data cannot be undefined 해결 방법
해결방법은 Promise 반환하도록 해주면 된다.
화살표함수 문법으로 바로 리턴하거나, 중괄호 내부에서 명시적으로 리턴해주면 된다.
1. 화살표 함수로 바로 리턴한다.
- "중괄호 없이" 화살표함수를 사용해서 바로 리턴하는 것에 유의하자.
const { data, status } = useQuery(['todos', id], () => fetchByParam(id));
2. 중괄호 내부에서 명시적으로 return문을 써준다.
const { data, status } = useQuery(['todos', id], () => {
return fetchByParam(id); // Promise 를 리턴!!! 해줘야 한다.
});
2번과 같은 케이스를 응용하면, 아래와 같이 async/await 를 사용해 등록할 수도 있다.
useQuery(['todos', id], async () => {
const data = await fetchByParam(id)
return data
});
해결 완료.
'개발(Development) > React(리액트)' 카테고리의 다른 글
[React] 카카오 애드핏 적용 방법(Next.js 환경) (0) | 2022.09.22 |
---|---|
[Next.js] 환경변수 사용 방법: .env파일 (development, production, local) (0) | 2022.08.25 |
[React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) (0) | 2022.08.23 |
[Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) (0) | 2022.08.21 |
[Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법 (0) | 2022.08.21 |
댓글