Tanstack Query Type-Safe하게 사용하기

목표

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

💡 Tanstack Query?

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

자세한 내용 : Tanstack Query

💡 Type Safe?

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

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값을 정하는 제네릭 타입

구현

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를 설정해줍니다.

3. useQuery에서 Type적용

// hooks/queries/chat/useGetChatRooms.ts
import { useQuery } from 'react-query';
import chatApi from '@apis/chat/chatApi';



const useGetChatRoom = (id: number) => {
  return useQuery<ChatRoomById, Error>(
    ['useGetChatRoom', id],
    () => chatApi.getChatRoom(id),
    {
      enabled: !!id,
    },
  );
};

export default useGetChatRoom;

첫 번째 제네릭 타입에 ChatRoomById, 두 번째 제네릭 타입에 Error을 설정해주었습니다.

실제 코드

index.d.ts, chatApi.ts, useQuery