React Query - keepPreviousData

다음과 같은 상황을 겪었다.

필요한 요구 사항은
반려동물 상세 페이지에서, 상단 카드 버튼을 눌러(나, 음, 뭉치), 해당 반려동물의 상세 데이터를 불러오는 것!

이 때 불러올 반려동물의 id를 state로 관리하고,
해당 state를 useQuery의 key값으로 전달해,
상단 카드 버튼을 눌러, id가 변경될 때마다, 해당 useQuery가 fetch 되도록 하였다.

 

여기서 문제점은...
맨 처음 해당 페이지에 들어왔을 때 (해당 반려동물 상세 데이터 요청이 success되기 전에)
발생하는 깜빡임을 해결하기 위해 placeholderData를 넣어줬는데,

상단 카드 버튼을 눌러 해당 query가 fetching 됨에 따라,
해당 query의 data가 최초에 넣어준 placeholderData가 되어버리는 것!

 

즉...
위 상황에서 placeholderData가 '1번' 일 때 '나'라고 적힌 상단 카드 버튼을 누르면,
'뭉치'(현재 data) -> '1번'(placeholderData) -> '나'(새로 fetch된 data) 순으로 데이터가 변경되는 것!
당연히 화면 역시 데이터가 변경될 때마다 깜빡깜빡거리고 말았다. 윽!

keepPreviousData

React Query에서는 이러한 상황에 유용하게 쓸 수 있는 keepPreviousData 란 옵션을 제공한다.

 const {
    data,
    isFetching,
    isPreviousData,
  } = useQuery({
    queryKey: ['projects', page],
    queryFn: () => fetchProjects(page),
    keepPreviousData : true
  })

true일 경우 해당 query의 data는
query key가 변경되더라도, 새 데이터가 요청되는 동안 마지막으로 성공한 fetch data로 유지된다.
이 후 해당 query 요청이 성공하면 이전 query data가 성공한 값으로 변경!
isPreviousData를 통해 현제 query가 제공하는 data가 이전 값인지도 알 수 있다. 와!

 

즉 위 상황에서 해당 keepPreviousData를 true로 설정할 경우,
'뭉치'(현재 data) -> '뭉치'('나' 요청 fetching) -> '나'(새로 fetch된 data)로 데이터가 유지된다.
→ 로딩 창이나 깜빡거림 없이 서로 다른 데이터를 받아와 보여줄 수 있다! 와!