swr 기본 사용법

프로젝트 진행중 swr를 활용하여 사용법에 대해 정리했다.

swr 이란

"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략으로 빠르고, 가볍고, 재사용 가능한 데이터를 가져온다.

 

설치

npm i swr
// or
yarn add swr

 

기본 사용법

import useSWR from 'swr'

function Test() {
    const fetcher = (...args) => fetch(...args).then(res => res.json())
    const { data, error } = useSWR('/api/test', fetcher);

    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>
    return <div>hello {data}!</div>
}

 

useSWR(key, fetcher, options)

파라미터

• key: 요청을 위한 고유한 키 문자열(또는 함수 / 배열 / null)
• fetcher: (옵션 ) 데이터를 가져오기 위한 함수를 반환하는 Promise
• options: (옵션 ) SWR hook을 위한 옵션 객체

중요한 점이 키가 fetch되는 api주소이다.

반환 값

• data : fetcher로 받아온 key에 대한 데이터
• error : fetcher에서 발생한 에러
• isValidating : 요청이나 갱신 로딩 여부
• mutate() : 캐시 된 데이터를 뮤테이트(갱신)하기 위한 함수

전역설정

동일한 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>
  )
}

 

fetcher 방법

• fetch

const fetcher = url => fetch(url).then(r => r.json())

 

• Axios

const fetcher = url => axios.get(url).then(res => res.data)

 

 

추가

프로젝트 진행 중 userId를 적용한 api 를 통해 user들의 닉네임들을 한번에 불러와야 되는 작업이 필요했는데 Promise.all() 를 활용하여 해결했다.

const urls = userInfo.map((userId: string) =>`https:// ..... /UserInfo?id=${userId}`);

const fetcher = (urls: string[]) =>
    Promise.all(
      urls.map((url: string) => {
        return axios.get(url).then((res) => {
          return res.data.userName;
        });
    })
 );

 const { data: userInfoData } = useSWR(urls, fetcher);

 

 

참고

데이터 가져오기를 위한 React Hooks – SWR

 

공부 | swr 정리(ft. react)