[React-Query] mutate 데이터 변이

📝 mutate를 통한 데이터 변이

예시 - 해당 아이디를 삭제하는 mutate

📌 mutate hooks

function useDeleteExam() {
  const queryClient = useQueryClient()

  const {mutate, isSuccess: isSuccessExample} = useMutation(({id}: {id: string}) => deleteExample(id), {
    onSuccess: () => {
      queryClient.invalidateQueries({queryKey: [queryKeys.example]})
      message.success('삭제를 완료했습니다.')
    },
    onError: () => {
      message.error('삭제를 실패했습니다.')
    }
  })

  return {mutate, isSuccessExample}
}

📌 axios (request 설정 보기)

function deleteExample(id: number): AxiosPromise<IExam> {
  return request({url: `${PATH}/${id}`, method: 'DELETE'})
}

👉 react query 옵션

invalidateQueries - 쿼리를 무효화 하여 캐시를 지우고 리페치

🤓 느낀점

react query를 통해서 관리를 함으로써 데이터의 편의성과 가독성이 좋아졌고 
캐시관리를 통해서 사용자에게 좀더 빠른 편의성을 제공할수있는점이 좋았다.