[FE] Feat : useSWR mutate 메서드를 사용하여 데이터 변경사항 즉시 반영하기

[sang-gyeong]

구현기능

• useSWR의 mutate를 사용한 캐시 업데이트
  • useFetch(swr 커스텀 훅)을 사용하여 데이터를 받아온 경우, swr은 내부적으로 url을 키로서 캐시로 데이터를 관리합니다.
  • 이때 데이터를 추가, 삭제하는 이벤트가 발생할 경우, 데이터의 변경사항을 화면에 바로 반영하고 싶었습니다.
    이를 위해 useSWR의 mutate 메서드를 사용했습니다.
  • mutate를 사용하여 데이터를 가져온 url key값을 첫번째 인자로 전달한 뒤, 업데이트 된 데이터를 두번째 인자로 넣어 캐시를 업데이트 하여 화면에는 업데이트 된 캐시로 구성하도록 하였습니다.
  • 이때 세번째 인자로 true값을 넣음으로써 데이터를 refetch하여 대체하였습니다.
  • 데이터가 변경되는 동안에는 변경된 캐시 데이터로 화면을 구성하고 이후 실제 refetch된 데이터로 대체함으로써 지연없이 데이터의 변경사항을 화면에 반영할 수 있었습니다.

  const addTrackEvent = async () => {
    await api.post(`library/tracks`, { trackId: track.id });
    mutate(
      '/library/tracks',
      data => {
        return { ...data, data: [...data.data, track].sort((a, b) => a.id - b.id) };
      },
      true,
    );
    dispatch({ type: 'ADD_TRACK', trackId: track.id });
  };