Library] SWR : 응용_Mutate & Revalidation

Mutate

mutate는 원격 데이터 및 캐싱된 값을 변경, 갱신하기 위해 사용됩니다.

다른 곳에서 해당하는 키값에 데이터를 post나 delete, patch 등 작업이 일어났을 경우, 캐싱된 데이터를 갱신해야 될 때

사용된다고 보면 됩니다. (revalidation)

 

Global과 Bound 두 가지로 나눠져 있습니다.

 

 

---

 

 

Global Mutate

useSWRConfig 또는 swr을 import 해서 사용하게 됩니다.

import { useSWRConfig } from "swr"
 
function App() {
  const { mutate } = useSWRConfig()
  mutate(key, data, options)
}

///////////////////////////////////////

import { mutate } from "swr"
 
function App() {
  mutate(key, data, options)
}

mutate(`/account/user`);

 

이런식으로 사용하시면 됩니다.

 

이것도 2가지 선언 방법이 있는데, 공홈 권장사항은 useSWRconfig를 사용하는 것으로 나와있습니다.

역할은 같으니, 상관없을 듯싶습니다.

 

 

---

 

 

Bound Mutate

import useSWR from 'swr'
 
function Profile () {
  const { data, mutate } = useSWR('/api/user', fetcher)
 
  return (
    <div>
      <h1>My name is {data.name}.</h1>
      <button onClick={async () => {
        mutate();
      }}>Uppercase my name!</button>
    </div>
  )
}

 

Global 방법과 달리 useSWR을 통해 key값을 바인딩해 놨기 때문에 mutate 실행시키면 됩니다.

 

 

---

 

 

data값에 변경하고 싶은 데이터를 넣으면 mutate를 사용하여 즉시 변경할 수 있습니다..

 

mutate(key, { ...data, name: newName }, oprion); // binding 됐을 경우, key생략

 

mutate를 통해 data추가되는 건 캐싱된 데이터가 추가되는 것일 겁니다. (저는 사용을 안 해봐서...)

따라서 DB에서 데이터를 가져오게 될 경우에는 새로고침하거나 다시 DB 데이터를 조회하는 행위를 했을 때, 추가된 data는 없어질 것으로 예상됩니다.

 

mutate도 option이 존재하므로, 공홈 확인해 보시면 됩니다.

https://swr.vercel.app/ko/docs/mutation

 

 mutate는 데이터 매개변수가 해결된 결과값을 반환하기 때문에 변수에 저장하여 사용할 수도 있습니다.

 

 

---

 

 

SWR에서 useSWRMutation을 import하여 trigger라는 선언형 함수를 통해 API를 통신할 수 있는 게 최근에 생겼습니다. 
(SWR 2.0 버전)
get요청에 한해서만 사용했는데, 이 범위를 늘려 통신 메서드 전체를 활용하고자 하는 것 같습니다.
아직 자료가 많지 않은 것 같고, 사용해 본 적이 없어 아직은 따로 다루진 않겠지만,
통일되어 하나의 라이브러리만 사용한다는 건 좋은 메리트인 것 같습니다.
안 그래도 이것저것 라이브러리 갖다 쓰기 바쁜데...