SWR mutation(Bound Mutation)

yonghee·2022년 6월 15일
0

baechu-market

목록 보기
29/32

SWR mutate 사용해보고 싶었던 기능이었다.
지금 데이터 하트를 누르면 빨간색으로 변경 되는데 이 기능을 데이터 요청 없이 즉각적으로 미리 보여주고 싶을수가 있다. 유저에게 먼저 보여주고 난 뒤 데이터를 요청하는 것, 사용자가 UI에서 이질감을 느끼거나 데이터 요청의 기다림 없이 해결하고 싶을 때 mutate를 사용하면 가능하다.

https://swr.vercel.app/ko/docs/mutation

const ItemDetail: NextPage = () => {
  const router = useRouter()
  const { data, mutate } = useSWR<ItemDetailResponse>(
    router.query.id ? `/api/products/${router.query.id}` : null
  );
  console.log(data);

  const onFavClick = () => {
    fetch(`/api/products/${router.query.id}/fav`, {
        method : "POST",
        body: JSON.stringify({}),
        headers: {
          "Content-Type": "application/json"
         } // api를 호출 할 때마다 headers를 설정해야 한다.
       })
    if(!data) return
    mutate({...data, isLiked: !data.isLiked }, false )
  	}
  }

2번째 인자로 true가 들어오면, 모든 UI가 변경 된 이후에도 SWR이 URL로 가서 데이터의 최신 버전을 한번 더 불러 오게 된다. 쉽게 생각하면 이런 것이다. 첫번째 인자에는 가짜 데이터를 넣고, 두번째 인자가 true이면 SWR이 다시 진짜 데이터를 찾아와서 불러온다. POST API들은 업데이트된 데이터를 직접 반환하기 때문에 다시 갱신할 필요가 없습니다 따라서 두번째 인자 값은 false로 하였다.
지금 까지 본 것이 Bound Mutations이다. Bound Mutations은

const { data, mutate } = useSWR<ItemDetailResponse>(
    router.query.id ? `/api/products/${router.query.id}` : null
  );

위와 같이 data에 할당 된 값에 한에서만 mutation이 가능하다.

profile
필요할 때 남기는 날것의 기록 공간

0개의 댓글