SWR

npm i swr

 

전역 설정

'use client';

import { SWRConfig } from 'swr';

type Props = {
  children: React.ReactNode;
};

export default function SWRConfigContext({ children }: Props) {
  return (
    <SWRConfig
      value={{
        fetcher: (url: string) => fetch(url).then((res) => res.json()),
      }}
    >
      {children}
    </SWRConfig>
  );
}

해당 컴포넌트를 provider로 사용하면 아래처럼 간단하게 api요청 함수를 사용할 수 있음

const { data, isLoading, error } = useSWR('/api/me');

mutate의 경우

mutate만 해줄 경우 해당 api 데이터로 요청이 가지만, 아래처럼 전역 설정을 이용할 경우 한번에 여러 요청을 보낼 수 있게됨.

  const { mutate: globalMutate } = useSWRConfig();
  .
  .
  .
    return mutate(addComment(post.id, comment.comment), {
      optimisticData: newPost,
      populateCache: false,
      revalidate: false,
      rollbackOnError: true,
    }).then(() => globalMutate('/api/posts'));

mutate

revalidate 기능

  const { mutate } = useSWRConfig();
  const handleLike = (like: boolean) => {
    fetch("api/likes", {
      method: "PUT",
      body: JSON.stringify({ id, like }),
    }).then(() => mutate("/api/posts"));
  };

 

function Profile () {
  const { data, mutate } = useSWR('/api/user', fetcher)

옵션

optimisticData - 데이터를 클라이언트 캐시로 갱신

revalidate = true - 비동기 업데이트가 완료되면 캐시의 유효성을 다시 검사
populateCache = true - mutation 요청으로 받아온 결과를 캐시에 갱신
rollbackOnError = true - 요청 실패하면 이전 캐시로 되돌림
throwOnError= true - 요청 실패하면 에러 발생

 

리액트 쿼리의 success에서 invalidate하지 않고 맵 돌리는 것과 같은 결과를 할 수 있음

예시)

    return mutate(updateLike(post.id, like), {
      optimisticData: newPosts,
      populateCache: false,
      revalidate: false,
      rollbackOnError: true,
    });