React Query에서는 API가 반환하는 데이터의 타입을 알 수 없기 때문에 Generics를 많이 사용한다. 만약 타입을 지정하지 않고 사용하게 되면 대부분 데이터가 unknown, any 상태로 사용하게 돼서 어떤 데이터를 다루는지 알기가 어렵다.

따라서 react-query는 typescript의 제네릭 형식을 강력하게 드라이브 하고 있기 때문에 제네릭 타입만 잘 사용한다면 타입을 보장 받으면서 편리하게 데이터를 다룰 수 있다.

Generic이란 데이터의 타입을 일반화한다(generalize)한다는 것을 뜻하며, 자료형을 정하지 않고 여러 타입을 사용할 수 있게 해준다.

즉, 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다.

useMutation & useMutateFucntion

useMutateFunction에는 몇가지 매개변수가 있다.

• TData : 변이 함수 자체에서 반환된 데이터
• TError : 발생할 것으로 예상되는 오류
• Tvariables : mutate함수가 예상하는 변수
• TContext : 낙관적 업데이트 롤백을 위해 onMutate에 설정

useMutateFunction<TData = unknown, TError = unknown, TVariables = void, TContext = unknown>

적용

• void: mutate함수로부터 반환될 데이터는 없으므로 void
• unknown: 오류 유형은 unkown
• Appointment: mutate함수에 인수로 전달될 변수인 appointment 타입 정의
• unknown : 낙관적 업데이트는 잠시후 작성후 작성. 일단 unknown

export const useReserveAppointment = (): UseMutateFunction<
  void,
  unknown,
  Appointment,
  unknown
> => {
  const { user } = useUser();
  const toast = useCustomToast();

  const { mutate } = useMutation((appointment: Appointment) =>
    setAppointmentUser(appointment, user?.id),
  );

  return mutate;
}