useQuery의 re-fetch 시 data의 동작과, 이전 값 유지하기
useQuery는 기본적으로 re-fetch 시마다 data가 undefined로 바뀐다.
이게 문제가 되는 상황을 직면하게 됐는데, 한 페이지 안에서 re-fetch를 할 때다.
위의 예시에서는, 버튼을 누를 때마다 데이터를 새로 받아오게 되는데, 데이터가 캐시되기 전, 새로운 데이터를 받아올 때마다 "자료를 불러오는 중…"이 떠서 좋지 않은 사용 경험을 줄 수 있다. (받아오고 렌더링하는 데이터의 양이 많아서 페이지가 긴데, 버튼을 누를 때마다 확 줄어들었다가, 다시 확 늘어나는 게 반복된다고 생각해보자.)
그래서 나는 화면이 마구 바뀌기보다, 재요청한 데이터가 수신 완료됐을 때 바뀌면 좋겠다고 생각했다.
사실 걱정이 앞섰다. '"아 useQuery 그렇게 쓰는 거 아닌데~" 하며 onSuccess, onError 등이 useQuery에서 사라진 마당에, 서버와의 완전 동기화를 위해서 이것도 안 되면 어쩌지?' 하는 생각이었다.
하지만 다행히 내가 원하던 옵션은 남아있었다.
useQuery의 오브젝트 파라미터로 placeholderData를 넣고, 값으로는 @tanstack/react-query에서 제공하는 keepPreviousData를 import하여 넣으면 된다.
이렇게 해서, 맨 처음 fetch가 이루어지지 않았을 때, 그리고 데이터가 undefined로 들어오는 때를 제외하고는
(물론 이건 정상적인 상황이 아니며, 개발자 도구 콘솔을 보면 아래와 같이 뜬다.)
data를 undefined 대신 이전 fetch된 값으로 유지할 수 있었다.
참고한 자료: velog의 강민수 (minsu8834)님의 글