React Query에서 제공하는 useQuery useMutation을 그대로 사용하면 항상 쿼리키와 쿼리 함수를 지정해야 하는 번거로움이 있다. API 유형에 따라 Base Query|Mutation 커스텀 훅을 만들어 두고 사용하면 쿼리키와 쿼리 함수를 일일이 지정하지 않고 여러 곳에서 재사용하기 좋다.

하지만 커스텀 훅을 만들 때 쿼리 타입을 지정하지 않으면 데이터가 unknown any인 경우가 많아서 어떤 데이터를 다루는지 알기 어렵다. 쿼리 타입은 대부분 제네릭으로 되어 있는데 이를 잘 사용하면 타입을 보장 받으면서 데이터를 편리하게 다룰 수 있다.

useQuery

제네릭 타입 톺아보기 ⚡️

export declare function useQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey // string | readonly unknown[];
>

• 🔍️ TQueryFnData : 쿼리 함수 리턴 타입 (AxiosResponse<T> 등)

• 🔍️ TError : 쿼리 함수 에러 타입 (AxiosError 등)

• 🔍️ TData : select 함수로 쿼리 함수 리턴값을 가공할 때 사용하는 최종 리턴 타입. 기본값 TQueryFnData

• 🔍️ TQueryKey : 쿼리 키 타입. 기본값 문자열 혹은 배열

Base Query 커스텀 훅

파라미터가 없을 때

훅을 사용하는 곳에서 쿼리 옵션을 넘길 수 있도록 options 파라미터를 추가한다. 쿼리 옵션은 React Query에서 제공하는 UseQueryOptions 타입을 import 해서 사용하면 된다. UseQueryOptions useQuery 둘의 타입 인터페이스는 동일하다.

UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>