참고사이트

velog

useMutation이란?

• React-Query를 이용해 서버에 변경(insert, update, delete) 작업 요청 시 사용한다.

사용 방법

• mutationFn

  • promise 처리가 이루어지는 mutation function

  // 첫 번째 방법
  const deleteData = useMutation(() => axios.delete(`api/delete/${id}`));
  
  // 두 번째 방법
  const deleteData = useMutation({
    mutationFn: (id) => axios.delete(`api/delete/${id}`)
  })
  

• mutate

  • useMutation을 이용해 작성한 내용들이 실제로 실행될 수 있도록 돕는 trigger 역할을 한다.
  • useMutation을 정의해준 후, 이벤트 발생 시 사용하는 것

  const { mutate } = () => deleteData()
  
  const deleteFn = () => {
  	deleteData.mutate(id)
  }
  

• onSuccess, onError, onSettled

  • async/await 만 사용했을 때

  const deleteData = async () => {
  	try{
  		const res = await axios.delete(`api/delete/${id}`)
          .then((res) => console.log(res.data))
  	} catch(err) {
  		console.error('error', err.message)
  	} finally {
  		console.log('어쨌든 실행되는 부분')
  	}
  }
  

  • useMutation 적용 시

  // fn key 값 생략된 버전
  const deleteData = useMutation((id) => axios.delete(`api/delete/${id}`), {
  	onSuccess: () => { console.log('요청 성공') },
    	onError: () => { console.error('에러 발생') },
    	onSettled: () => { console.log('결과에 관계 없이 무언가 실행됨') }
  })
  
  // fn key 값 명시된 버전
  const deleteData = useMutation({
    	mutationFn: (id) => axios.delete(`api/delete/${id}`),
  	onSuccess: () => { console.log('요청 성공') },
    	onError: () => { console.error('에러 발생') },
    	onSettled: () => { console.log('결과에 관계 없이 무언가 실행됨') }
  })
  

  • onSuccess, onError, onSettled는 useMutation 정의 시 뿐만 아니라 mutate에서도 사용 가능하다.

useMutation으로 낙관적 업데이트 하기

• React query는 낙관적 업데이트를 지원하며, 서버의 데이터 업데이트가 성공하기 전에도 UI를 업데이트 할 수 있게 한다.

• 서버와의 데이터 동기화를 신경쓰지 않고 먼저 사용자에게 성공 시 UI를 보여준 후, 요청의 결과가 오면 성공/실패 여부에 따라 UI 업데이트

• 사용자는 서버와의 통신 여부와 관계 없이 UI를 확인할 수 있게 됨

• 예: 인스타그램의 좋아요 기능, 카카오톡이 일단 전송된 후 성공, 취소/재전송 창이 나중에 뜨는 것

• onMutate

  • React Query에서 낙관적 업데이트를 수행하는 방법
  • API Call 전에 실행되는 함수
  • 성공 시 현재 데이터 캐시를 업데이트하거나 UI를 변경하고, 실패 시 사용할 수 있는 rollback 매커니즘도 제공한다.
  • onMutate callback 함수에서 UI를 업데이트하고, setQueryData 함수로 이전 데이터 업데이트
  • onError 콜백함수에서 에러 발생 시 이전 데이터로 rollback

  const queryClient = useQueryClient(() => axios.post(`api/like/${id}`), {
  	onMutate: async (id) => {
        // 'queryKey'로 진행 중인 refetch 취소하여 낙관적 업데이트를 덮어쓰지 않도록 함
  		await queryClient.cancleQueries({
          	queryKey: ['queryKey]
          })
            
        // 이전 데이터를 받아옴
          const previousData = queryClient.getQueryData(['queryKey']);
        
        // 새로운 값으로 낙관적 업데이트
        	queryClient.setQueryData(['queryKey'], (prev) => !prev)
        
        	return { previousData }
      },
    // mutation이 실패한 경우
    onError: (err, newData, context) => {
      // onMutate로부터 반환된 context를 사용하여 rollback
      queryClient.setQueryData(['queryKey'], context.previousData)
    },
    onSettled: () => {
      // 성공, 실패 여부에 관계 없이 refetch
     	queryClient.invalidateQueries({queryKey: ['queryKey']}) 
    }
  });
  
  const deleteData = useMutation({
   	 
  })
  

useMutation으로 업데이트 된 데이터를 반영하려면?

• invalidateQuries

  • useQuery에서 사용된 queryKey의 유효성을 제거해줄 목적으로 사용됨
  • queryKey의 유효성을 제거해주는 이유?
    • 서버로부터 데이터를 다시 조회해오기 위해서
  • useQuery에는 staleTime, cacheTime이 존재하여 업데이트 사항이 생겼더라도 해당 시간이 지나기 전까지는 동일한 데이터를 화면에 보여줌
  • invalidateQuries를 사용해 가지고 있던 queryKey의 유효성을 제거해줌으로써 캐싱되어 있던 데이터 대신 새로운 데이터를 서버에 요청

  const queryClient = useQueryClient(); // 등록된 queryClient를 가져옴
  
  const deleteData = useMutation((id) => axios.delete(`api/delete/${id}`), {
  	onSuccess: () => { 
        console.log('요청 성공');
        // 요청 성공 시 해당 queryKey 유효성 제거
        queryClient.invalidateQueries('queryKey')
      },
    	onError: () => { console.error('에러 발생') },
    	onSettled: () => { console.log('결과에 관계 없이 무언가 실행됨') }
  })