SWR

Data fetching library

DB가 가진 최신 데이터를 중복되지 않게(최적화하여) 가져오는 방법을 제공.

docs가 워낙 잘되어 있어서 여기선 mutate에 관한 내용만 가볍게 남기겠다.

참고: https://swr.vercel.app

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 () => {
        const newName = data.name.toUpperCase()
        // 데이터를 업데이트하기 위해 API로 요청을 전송
        await requestUpdateUsername(newName)
        // 로컬 데이터를 즉시 업데이트하고 갱신(refetch)
        // 노트: 미리 바인딩 되었으므로 useSWR의 뮤테이트를 사용할 때는 key가 요구되지 않음
        mutate({ ...data, name: newName })
      }}>Uppercase my name!</button>
    </div>
  )
}

전체 흐름

• useSWR을 이용해서 '/api/user' 이 키 값에 해당하는 데이터를 가져온다.
• 버튼을 클릭하면 await requestUpdateUsername(newName) API를 호출하여 DB에 데이터를 대문자로 변경하는 업데이트를 진행한다.
• 이제 사용자에게 업데이트된 정보를 보여주기 위해 mutate를 실행한다.
  • 로컬에서 먼저 캐시된 데이터를 업데이트한다.
  • 그리고 다시 키 값에 해당하는 데이터를 실제 DB에서 가져온다.

mutate 상세

• const { data, mutate } = useSWR('/api/user', fetcher)
  • mutate는 키 값이 바인딩된 곳에서 가져왔다.(전역에서 가져왔으면, 첫 번째 인자로 key 값을 명시해 주어야 한다.)
• mutate({ ...data, name: newName })
  • 첫 번째 인자는 로컬에 캐시된 데이터를 변화시킬 값이다. 해당 키 값으로 캐시된 로컬 데이터를 첫 번째 인자로 변화시킨다.
  • 즉 상단에서 useSWR을 호출해서 가져온 '/api/user' 이 키 값으 data를 { ...data, name: newName } 이걸로 업데이트 한다.
  • 두 번째 인자는 refetching 여부이다. 디폴트는 true이다.
  • 즉 먼저 로컬에 캐시된 데이터를 업데이트하고, 다시 API get 요청을 보내서 데이터를 refetching 하는 것이다.