[React-Query] Query data cannot be undefined 에러 해결 방법

# 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
});

 

해결 완료.