Today 요약

1. 리액트 쿼리 강의

1. What I Learned?

리액트 쿼리 강의

useMutation

• useMutation은 한 번의 작업이기 때문에 캐시되지 않는다.
• useQuery는 세번 시도하지만 useMutation은 다시 시도하지 않는다.
• refetch가 없다.
• isLoading, isFetching도 당연히 없다.

const { mutate } = useMutation({
  mutationFn: (appointment: Appointment) =>
    setAppointmentUser(appointment, userId),
  onSuccess: () => {
    toast({ title: 'you have reserved appointment!!', status: 'success' })
  }
})

위와 같이 사용한다.

캐시키가 없어도 된다. useMutation으로 반환된 mutate 함수를 가지고 데이터를 업데이트 한다.

하지만 useMutation을 사용할 때는 주의해야 할 점이 있다. 데이터를 캐시에 반영하지 않기 때문에, 변경되었다는 부분을 알려야 한다. 그때 사용할 수 있는 게 invalidateQueries다. 즉, 데이터가 변경되었으니 오래되었다고 알려주는 것이다. 그렇게 데이터를 stale한 상태로 만들어서 다시 한 번 호출해서 캐시에 반영될 수 있도록 한다.

export function useReserveAppointment() {
  const { userId } = useLoginData()

  const toast = useCustomToast()

  const queryClient = useQueryClient()

  const { mutate } = useMutation({
    mutationFn: (appointment: Appointment) =>
      setAppointmentUser(appointment, userId),
    onSuccess: () => {
      toast({ title: 'you have reserved appointment!!', status: 'success' })
      queryClient.invalidateQueries({ queryKey: [queryKeys.appointments] })
    }
  })

  return mutate
}

export function useCancelAppointment() {
  const toast = useCustomToast()

  const queryClient = useQueryClient()

  const { mutate } = useMutation({
    mutationFn: removeAppointmentUser,
    onSuccess: () => {
      toast({ title: 'succeed delete item!!', status: 'warning' })
      queryClient.invalidateQueries({ queryKey: [queryKeys.appointments] })
    }
  })

  return mutate
}