bound mutate

현재 보고 있는 페이지의 정보를 실시간 변경할 시에 사용한다.

const { data, mutate:bountMutate } = useSWR('/api/url');

const toggleLikeBtn = ()=> {
  // mutate({①}, ②)
  bountMutate({ ...data, data: { isLike: !data.isLike } }, true);
}

①인자는 변경할 데이터 객체를 넣는다.
②인자는 이전 데이터를 불러와 재검증 여부를 정한다. true라면 변경한 데이터 위에 이전 데이터를 다시 불러와 덮는다. false라면 변경한 데이터를 UI에 노출한다.

unbound mutate

현재 페이지에서 변경한 데이터를 다른 페이지에 적용해야 할 때 사용한다.

const { data, mutate:unbountMutate } = useSWRConfig();

const toggleLikeBtn = ()=> {
  // mutate(①, {②}, ③)
  unbountMutate('/api/mylike', { ...data, data: { isLike: !data.isLike } }, false);
}

①인자는 key를 넣는다. key는 변경할 데이터를 찾기 위한 값이다.
②인자는 변경할 데이터 객체를 넣는다.
③인자는 bound mutate와 같이 이전 데이터 리로드 여부를 묻는다.

참고
노마드 코더 - 캐럿마켓 클론코딩