[TypeScript] useQuery vs useSuspenseQuery

🚨 문제

큰 문제는 아니고 useQuery를 사용했을 때 `isPending` 상태일 때 로딩 컴포넌트를 리턴하는데 `data`가 undefined일 수 있다는 에러가 발생했다. 

 

1차로 시도했던 방법은 삼항연산자를 사용해서 falsy한 값일 경우 명시적으로 `null` 값을 할당하는 방법으로 변경했다. 

/** 실제 코드는 아닌 예시 코드 */

// 에러 났던 코드
const { data, isPending } = useGetDataQuery(); // 커스텀 useQuery
if(isPending) return <>Loading . . .</>

console.log(data) // 여기서 undefined일 수도 있다는 에러 발생함

타입스크립트는 `isPending`일 경우 return을 해주는 것과 관계없이 `useQuery`로 받아온 `data`는 `undefined`일 가능성이 있다고 판단한다.

 

💡 해결

매우 간단하게 해결이 되었다. 커스텀 useQuery를 useSuspenseQuery로 변경했다. suspense는 데이터의 요청이 끝날 때 까지 기다린다는 보장이 되어 있어서 타입 에러가 발생하지 않는다.

 

📍 정리

• useQuery의 반환 타입은 `<Data>` 또는 `undefined`를 반환한다.
• suspense는 고정적으로 `<Data>` 만 반환한다. 따라서 `isPending` 도 사용할 필요가 없고, `undefined `타입 에러가 발생하지 않는다.