Library] SWR : 응용

2023.07.03 - [Front-End/Library] - Library] SWR

 

저번 게시글에 이어서 SWR 여러 개념? 기능? 들을 설명하려고 합니다.

 

전역설정

만약 SWR을 사용하는데 fetcher가 중복된다면 고려해서 사용하면 좋을 듯한 기능입니다.

import useSWR, { SWRConfig } from 'swr'
 
function Dashboard () {
  const { data: events } = useSWR('/api/events')
  const { data: projects } = useSWR('/api/projects')
  const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // 오버라이드
 
  // ...
}
 
function App () {
  return (
    <SWRConfig
      value={{
        refreshInterval: 3000,
        fetcher: (resource, init) => fetch(resource, init).then(res => res.json())
      }}
    >
      <Dashboard />
    </SWRConfig>
  )
}

 

공식 홈페이지에 있는 예제 소스입니다.

App함수에서 fetcher가 겹치기 때문에 전역으로 <SWRConfig>를 추가하였고,

기본옵션으로 refreshInterval을 3초 주었지만, user 같은 경우는 0으로 덮어씌워준 상황입니다.

중복으로 여러 개의 <SWRConfig>도 가능해 보입니다.

 

 

---

 

 

다중 인자 전달

보통 토큰값을 사용하는데, 다른 토큰값을 전달해야 될 때? 사용될 듯싶습니다.

const { data: user } = useSWR(['/api/user', token], ([url, token]) => fetchWithToken(url, token))

 

인자 개수는 url과 fetcher로 동일하여, 첫 번째 인자인 url을 넘길 때, 배열을 사용하여 한번에 넘겨서 적용시켜 줍니다.

객체로 전달해도 가능합니다.

 

 

 

---

 

 

내용이 많아서 좀더 세분화해서 글을 작성해야 될 것 같습니다.
추가로 업데이트 될 수도 있고, 아닐 수 도 있습니다.
mutate랑 pagination은 따로 작성할 예정입니다.