목표

Tanstack Query의 useQuery와 useMutaion을 Type Safe하게 사용해보자.

<aside> 💡 Tanstack Query?

Tanstack Query는 서버 상태를 불러오고, 캐싱하고, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 비동기 상태 관리 라이브러리이다.

자세한 내용 : Tanstack Query

</aside>

<aside> 💡 Type Safe?

말 그대로 타입에 안정적인 것을 의미한다.

</aside>

Types

useQuery의 Types

• query/packages/react-query/src/useQuery.ts

  export function useQuery<
    TQueryFnData = unknown,
    TError = DefaultError,
    TData = TQueryFnData,
    TQueryKey extends QueryKey = QueryKey,
  >(
    options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
    queryClient?: QueryClient,
  ): DefinedUseQueryResult<TData, TError>
  

  • TQueryFnData : queryFn의 return값을 정하는 제네릭 타입
  • TError : queryFn의 Error형식을 정하는 제네릭 타입
  • TData : useQuery의 selec option으로, queryFn의 데이터를 추가적으로 가공할 경우 data에 담길 제네릭 타입, default

구현

1. Types 정의

// @types/chat.d.ts
interface ChatRoomById {
  chatRoomId: number;
  artist: {
    id: number;
    name: string;
    responseTime: string;
  };
  member: {
    id: number;
    name: string;
    responseTime: string;
  };
  messages: Message[];
}

// @types/index.d.ts
interface Error {
  code: string;
  detail: string;
  error: string;
  status: number;
}

• Error type의 경우 모든 api에서 공통적으로 사용하기 때문에 index.d.ts에 작성하였습니다.

2. Api에서 Type 적용

// apis/chat/chatApi.ts
async getChatRoom(id: number): Promise<ChatRoomById> {
	const { data } = await axios.get(`/chat-rooms/${id}`);
	return data;
}

axios의 리턴값은 Promise객체이기 때문에 Promise 객체로 타입 설정을 하고, 제네릭 타입으로 ChatRoomById를 설정해줍니다.