[Tanstack Query] useQuery의 반환값에 타입 지정하기

useQuery와 ts를 이용할때 useQuery로 불러온 데이터의 타입을 지정해줘야

해당 데이터를 사용할 때 타입 안정성도 보장되고, 중요한 자동완성도 가능함

useState에서 ts를 쓸 때 defaultValue가 없고 그 value 값이 복잡한 객체일 때 제네릭으로 타입을 미리 알려주듯이

useQuery에서도 반환 타입을 제네릭으로 지정해주면 된다.

 

tanstack query 공식 문서 참고

 

 

가령 나의 경우엔 현재는 목 데이터를 쓰고 fetch api를 사용해서 불러왔는데, 

이때 데이터 타입이 복잡한 객체여서 models라는 폴더 안에 따로 타입, interface만 저장해서 export 해주었다.

모양새는 대략적으로 아래와 같음 

(추후 리팩토링 과정에서 비교하기 위해서 아래의 코드는 fetch로 작성하였다)

import { useParams } from 'react-router-dom';
import { useQuery } from 'react-query';
import { Popular } from '../models/video/popular';
import VideoCard from '../components/VideoCard';

const Videos = () => {
  const { keyword } = useParams();

  const {
    isLoading,
    error,
    data: videos,
  } = useQuery<Popular, Error>(['videos', keyword], async () => {
    return fetch(`/videos/${keyword ? 'search' : 'popular'}.json`)
      .then((res) => res.json())
      .then((data) => data.items);
  });

  return (
    <>
      <div>Videos {keyword ? `🔍${keyword}` : '🔥'}</div>
      {isLoading && <p>Loading...</p>}
      {error && <p>Something is wrong...</p>}
      {videos && (
        <ul>
          {videos.items.map((video) => (
            <VideoCard key={video.id} video={video} />
          ))}
        </ul>
      )}
    </>
  );
};

export default Videos;

 

 

결론

⇒ useQuery 훅에 제네릭 넣기

이유 : useQuery 훅은 비동기적으로 데이터를 가져오는데, 이 데이터에 대한 상태(로딩, 성공, 에러)를 관리한다. 이때 제네릭 타입을 사용해 useQuery 훅으로 부터 반환되는 데이터의 타입을 명시적으로 지정함으로써, 타입스크립트가 해당 데이터를 사용하는 코드에서 타입 안정성을 보장할수 있게 하기 때문.

 

** useQuery<Popular, Error>에서 Error는?

여기서 useQuery가 Popular 타입의 데이터를 성공적으로 가져오거나 실패시 Error 타입의 오류를 반환할 것임을 의미한 것

• Error는 JavaScript에 내장된 객체로 오류를 나타내는 데 사용됨
• Error 객체는 프로그램에서 예외 상황이 발생했을 때 생성됨