SWR

SWR

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

요청을 하는 동안 캐시되어 있는 데이터를 먼저 보여줌

 

 

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

• useSWR hook 은 key, fetcher 함수, options 를 전달받고 data, error 를 반환함
• key: 데이터의 고유한 식별자 (일반적으로 API URL)
• fetcher: 데이터를 반환하는 비동기 함수
• options: SWR hook을 위한 옵션 객체

---

SWR 설치

npm install swr
yarn add swr

 

import axios from 'axios';
import useSWR from 'swr';

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

const useUser = (id) => {
  const { data, error } = useSWR(`https://jsonplaceholder.typicode.com/users/${id}`, fetcher, {
    refreshInterval: 1000,
  });
  
  return {
    user: data,
    isLoading: !error && !data,
    isError: error,
  };
};

export const Page = () => {
  return (
    <>
      <Profile id={1} />
      <Avatar id={1} />
    </>
  );
};

export const Profile = ({ id }) => {
  const { user, isLoading, isError } = useUser(id);

  if (isError) return <div>failed to load</div>;
  if (isLoading) return <div>loading...</div>;

  return (
    <>
      <div>hello {user.name}!</div>
      <Avatar id={1} />
    </>
  );
};

const Avatar = ({ id }) => {
  const { user, isLoading, isError } = useUser(id);

  if (isError) return <div>failed to load</div>;
  if (isLoading) return <div>loading...</div>;

  return <div>hello {user.name}!</div>;
};

---

부모 컴포넌트의 useEffect 에서 api를 호출한 데이터를 자식에게 전달하는 방식 대신
필요한 컴포넌트에서 swr 을 이용해 캐시된 데이터를 사용하는 것

 

장점

• 컴포넌트의 독립성을 높일 수 있음
• 중복 제거, 캐시, 공유, 한 번의 api 호출
• 사용자 포커스 / 네트워크 재연결 시 데이터 갱신 가능

---

전역 설정

function App () {
  return (
    <SWRConfig
      value={{
        refreshInterval: 3000,
        fetcher: (resource, init) => fetch(resource, init).then(res => res.json())
      }}
    >
      <Dashboard />
    </SWRConfig>
  )
}

SWRConfig 로 컴포넌트를 감싸기

value 에 옵션 설정 가능

---

cache(key)

const Page = () => {
  const { cache } = useSWRConfig();

  return (
    <>
      <Avatar id={2} />
      <button
        onClick={() => {
          console.log(
            `check: ${JSON.stringify(cache.get('https://jsonplaceholder.typicode.com/users/2'))}`
          );
        }}
      >
        check
      </button>
    </>
  );
};

key 값을 이용해 객체를 가져올 수 있음

 

---

mutate

 

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

 

const Page = () => {
  const { mutate } = useSWRConfig();

  return (
    <>
      <Avatar id={2} />
      <button
        onClick={() => {
          mutate('https://jsonplaceholder.typicode.com/users/2');
        }}
      >
        check
      </button>
    </>
  );
};

key 에 저장되어 있는 fetcher 를 다시 실행함

 

 

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)
        // key는 미리 바인딩되어 있으므로 필요하지 않음
        mutate({ ...data, name: newName })
      }}>Uppercase my name!</button>
    </div>
  )
}

현재 key 를 이용해 데이터를 즉시 업데이트함

mutate 에 key 를 전달하지 않아도 됨

 

const Mutate = () => {
  return (
    <SWRConfig>
      <Page />
      <Profile />
    </SWRConfig>
  );
};

export default Mutate;

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

const Page = () => {
  const { data } = useSWR('https://jsonplaceholder.typicode.com/posts/4', fetcher);
  const { mutate } = useSWRConfig();

  if (!data) return <>Loading...</>;

  return (
    <div>
      {data.title}
      <button
        onClick={async () => {
          const title = data.title.toUpperCase();

          // 로컬 데이터 즉시 업데이트, 갱신 비활성화
          mutate('https://jsonplaceholder.typicode.com/posts/4', { ...data, title }, false);

          // 로컬 데이터 재검증 (갱신 트리거)
          mutate('https://jsonplaceholder.typicode.com/posts/4');
        }}
      >
        UpperCase
      </button>
    </div>
  );
};

const Profile = () => {
  const { data, mutate } = useSWR('https://jsonplaceholder.typicode.com/posts/5', fetcher);

  if (!data) return <>Loading...</>;

  return (
    <div>
      {data.title}
      <button
        onClick={async () => {
          const title = data.title.toUpperCase();

          // 로컬 데이터 즉시 업데이트, 갱신 비활성화
          mutate({ ...data, title }, false);

          // 로컬 데이터 재검증 (갱신 트리거)
          mutate();
        }}
      >
        UpperCase
      </button>
    </div>
  );
};

useSWRConfig 에서 반환된 mutate 사용 시 key 를 넣어주어야 함
useSWR 에 key 를 넣고 반환된 mutate 사용 시에는 key 를 넣어주지 않아도 됨

---

onErrorRetry

const Fetcher = () => {
  return (
    <SWRConfig value={{ fetcher: (...args) => axios.get(...args).then((res) => res.data) }}>
      <Page />
    </SWRConfig>
  );
};

export default Fetcher;

const Page = () => {
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/posts/3', {
    onErrorRetry: (error, revalidate, { retryCount }) => {
      if (error.status === 404) return alert(404);
      if (retryCount > 3) return;
      setTimeout(() => revalidate({ retryCount }, 100));
    },
  });

  if (error) return <>Error!</>;
  if (!data) return <>Loading...</>;

  return <>{data.title}</>;
};

에러 발생 시 재시도 횟수가 3회 이상일 경우 더 이상 재시도하지 않음

1초마다 재시도 횟수를 재검증함