React-Query

React-Query는 사용자에게 새로운 정보를 보여줄 수 있는 옵션을 제공한다.

useQuery

useQuery를 이용해서 데이터를 fetching 할 수 있으며 HTTP GET 요청을 할 때 주로 사용한다.
useQuery는 queryKey, queryFn, options를 이용해서 코드를 작성할 수 있다.

• queryKey: Query를 유니크하게 지칭할 배열
• queryFn: Promise를 리턴하는 함수
• options: 다양한 옵션들을 전달할 수 있는 객체

useMutation

React-Query를 이용해 서버의 데이터를 변경할 때 사용하며 HTTP POST, PUT, DELETE 요청을 사용할 수 있다. (C,U,D)

사용법

mutationFn

• mutationFn은 queryFn처럼 Promise를 리턴하는 비동기 함수
• axios를 이용하여 서버에 API를 요청하는 부분

mutationFn 파라미터는 useMutation의 리턴값인 mutate 함수의 인자로 전달된다. mutationFn에서는 어떻게 동작할지 정의만 하고, mutate 함수를 통해 나중에 실행되는 것이다.

// 방법1
const DeleteData = useMutation(() => axios.delete(`/api/delete/${fundId}`));

// 방법2
const DeleteData = useMutation({
  mutationFn: (fundId) => axios.delete(`/api/delete/${fundId}`)
})

mutate

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

const { mutate } = () => deleteData();

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

onSuccess, onError, onSettled

• async/await 만 사용한 경우

const deleteData = async () => {
  try {
    const response = await axios.delete(`/api/delete/${fundId}`)
    	.then((response) => console.log('👌🏻펀딩 생성 성공', response.data))
  }
  catch (error) {
    console.error("❌펀딩 생성 중 에러 발생..", error);
  }
  finally {
    console.log("결과랑 상관없이 뭔가 실행됨")
  }
}

• useMutation 적용한 경우

// fn key값 생략ver
const deleteData = useMutation((fundId) => axios.delete(`/api/delete/${fundId}`), {
  onSuccess: () => { console.log('👌🏻펀딩 생성 성공') },
  onError: () => { console.error('❌펀딩 생성 중 에러 발생') },
  onSettled: () => { console.log('결과랑 상관없이 뭔가 실행됨') }
})

// fn key값 명시ver
const deleteData = useMutation({
  mutationFn: () => axios.delete(`/api/delete/${fundId}`),
  onSuccess: () => { console.log('👌🏻펀딩 생성 성공') },
  onError: () => { console.error('❌펀딩 생성 중 에러 발생') },
  onSettled: () => { console.log('결과랑 상관없이 뭔가 실행됨') }
})

onSuccess, onError, onSettled는 useMutation 정의할 때 뿐만 아니라, mutate에서도 사용 가능

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

• React-Query는 낙관적 업데이트를 지원하며, 서버에 데이터 업데이트가 성공하기 전에 UI를 업데이트 할 수 있음
• 서버와의 데이터 동기화를 신경쓰지 않고 먼저 사용자에게 성공 시 UI를 보여준 후, 응답이 오면 성공/실패 여부에 따라 UI 업데이트!
• 사용자는 서버와의 통신 여부와 관계없이 UI를 확인할 수 있음
• ex) instagram의 좋아요, kakaotalk에서 우선 메세지가 전송된 후(말풍선 만들어짐), 취소/재전송 창이 나중에 뜨는 것 ..

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: ['쿼리키']
    })
    
    // 이전 데이터를 받아옴
    const preData = queryClient.getQueryData(['쿼리키']);
    
    // 새로운 값으로 낙관적 업데이트
    queryClient.setQueryData(['쿼리키'], (prev) => !prev)
    
    return { preData }
  },
  
 // mutation 실패
  onError: (err, newData, context) => {
    // onMutate로부터 반환된 context를 사용하여 rollback
    queryClient.setQueryData(['쿼리키'], context.previousData)
  },
  onSettled: () => {
    // 성공, 실패 여부에 관계없이 refetch
    queryClient.invalidateQueries({queryKey['쿼리키']})
  }
});

💡 useMutation으로 업데이트 된 데이터를 반영하기

invalidateQueries

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

const queryClient = useQueryClient(); // 등록된 queryClient 가져오기

const delete = useMutation(() => axios.delete(`/api/delete/${fundId}`), {
  onSuccess: () => {
    console.log('👌🏻펀딩 생성 성공');
    // 요청 성공 시 해당 queryKey 유효성 제거
    queryClient.invalidateQueries('쿼리키')
  },
  onError: () => { console.error('❌펀딩 생성 중 에러 발생') },
  onSettled: () => { console.log('결과랑 상관없이 뭔가 실행됨') }
})

---

✚ References

공식문서
블로그