11.8 Bound Mutations

bound mutation 구현하기

SWR 캐시를 mutate 해야 한다. mutate란, 돌연변이, 즉 변형을 의미한다. SWR 캐시를 변경하고자 하는 목적은 현재 view 상에서 보여지는 data는 swr의 캐시 data이기 떄문이다. 캐시된 data를 mutate 함으로써 view를 업데이트 하는 것이다.

const {data, mutate} = useSWR();

const onFavClick = () => {
	mutate({}, true) // 두번쨰 파라미터에는 revalidation 여부다. 
}

bound mutate에 첫번째 자리에 들어간는 파라미터 { }는 변경될 새로운 데이터이다. 그리고 두번째 자리는 revalidation 여부이다. revalidation란? 해당 요청을 다시 server로 request 하는 것이다.

bound mutation 이란, 제한된 변형을 뜻한다. 다시 말해 하나의 useSWR에 대한 mutate이다. 다른 개념으로 unbound mutation도 있다. unbound mutation란, 직접 요청한 useSWR 뿐만 아니라, 다른 화면에 있는 다른 요청들의 데이터도 변경하는 것이다.

const onFavClick = () => {
    if (!data) return;
    mutate({ ...data, isLiked: !data?.isLiked }, false); // cache만 변경하여 화면의 UI를 변경
    toggleFav({}); // backend server로 데이터 fetching을 요청
  };