[NJ(63)]변이(Mutation)와 변이 전역 설정 입문

React Query Mutations

• 실제 서버 업데이트 할 것임.
  • 캐시에서 data를 제거하고, 새로고침을 trigger 하기 위해, 쿼리를 무효화하는 것을 살펴보자.
  • mutation 하고, 서버로부터 새로운 data를 받아올 때, 상황에 따라 cache를 update할 것임.
    ex) 전화번호 같은 사용자 데이터를 update 할 때, server는 사용자의 새로운 데이터 객체를 반환한다. => 그 data를 사용해서 캐시를 업데이트한다.
  • 낙관적 업데이트도 살펴보자.
    => 우리의 mutation이 success 할 것이라는 희망을 갖고 있지만, 만약 실패한다면 rollback할 것임.

Global Fetching / Error

query에 대해 했던 것과 같은 방법으로,
mutation에 대한 전역 fetch 지표랑 error handling을 설정하자.

• query랑 매우 비슷함
• Errors
  • onError 콜백을 설정할 것이다. (query client의 mutationsCache 속성을 이용)
• Loading indicator
  • 로딩 상태를 나타내는 useIsMutating을 사용하자. (fetching 상태를 나타내는useIsFetching과 유사하지만 현재 해결되지 않은 변형 호출이 있는지 여부 알려줌)
  • Loading 컴포넌트를 update해서 isMutating상태인지, isFetching 상태인지 알려줌.

코드로 살펴보기

Mutation Error

현재 이 부분에 변형 캐시 (mutation cache)를 추가해보자.

MutationCache를 import 하자.

mutationCache 추가해준 코드.

이 부분 기억나는가?
우리는 오류가 data를 가져올 수 없다고 설정했었다.

이 부분을 삭제하고,

제목을 매개변수로 만들었다.

actionType이 'query'면 'fetch' 가 action 상수로 들어가고, 'mutation'이면 'update'가 들어간다.

이런식으로 코드를 변경해준다.
action type이 query인지, mutation인지에 따라 메시지가 다르게 나온다.

=> id와 함께 가지고 있는(id가 정해져있으니까 이로 생기는 중복이 있을 것으로 추측) 중복을 제거하는 이점이 있음
=> 특정 변형에 대해 하나 이상의 에러를 받지 않을 것임.

mutation Fetching

변형의 fetching 상태에 대해서는 Loading 컴포넌트를 살펴보자.

useIsMutating을 가져오자.

fetching 중이거나, mutating 중이면, '로딩 스피너'를 표시("inherit")