mutate

mutate

mutate는 서버에 요청 안보내고 데이터를 수정하는 것이다. 즉 서버 요청을 하지 않고 클라이언트 쪽에서 데이터를 조작할 수 있다. 그러다가 결국 마지막엔 서버에 데이터가 이렇게 바뀐게 맞나 점검을 하는데 이것이 mutate의 두번째 인자이고 shouldRevalidate라고 한다. 따라서 이 두번째 인자에 false를 넣어야 서버에 요청을 보내지 않는다. 

 

-예시

인스타에 좋아요를 누르면 하트의 색이 변하는데 이것은 서버에 가기 전에 하트의 색을 바꾸는 것이라 mutate를 사용했다. 이렇게 하면 사용자 입장에서는 빠르게 적용이 되는 것 처럼 느껴져서 좋다. 하지만 만약 서버에 전송이 실패하면 다시 좋아요를 취소시킨다. 이런 것을 OPTIMISIC UI라고 부른다. 낙관적인 UI라고 부른다. 

 

사용법

1번째 방법

  const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher);

이렇게 useSWR에 넣어두면 컴포넌트가 로딩될 때마다 한번은 요청이 간다.

 

2번째 방법

import useSWR, { mutate } from 'swr';

const Workspace: FC<React.PropsWithChildren<{}>> = ({ children }) => {
  const onLogout = useCallback(() => {
    axios
      .post('http://localhost:3095/api/users/logout', null, {
        // 이걸해야 백과 프론트 쿠키 공유 가능
        withCredentials: true,
      })
      .then(() => {
        // 로그아웃이 성공하면 data엔 내 정보가 있다가 false로 바뀜
        mutate('http://localhost:3095/api/users', false, false);
      });
  }, []);

이렇게 하면 로딩될 때 마다 요청 가는 것도 아낄 수 있다. 하지만 1번째 방법을 더 많이 쓰기 때문에 굳이 이렇게 사용할 필요는 없다.

 

문제점(dedupingInterval로 해결)

  const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher);

이 코드를 여러 컴포넌트에 사용하는데 이 코드를 많이 쓰면 요청이 많이 가지 않을까?

 

  const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fether, {
    dedupingInterval: 2000,
  });

이렇게 dedupingInterval을 사용하면 아무리 많은 요청을 보내도 저 시간 동안은 딱 한번만 요청이 보내진다. 첫번째 요청만 보내지고 다른 요청들은 캐시 데이터를 사용한다.