Tanstack Query ㅡ placeholderData : 이전 데이터를 미리 보여주고싶을 때
수정시각
레퍼런스
Empty
서버 상태를 데이터 테이블 컴포넌트에서 그대로 사용하면서, 페이지가 넘어갈 때 새로운 데이터를 패칭하면서 데이터 테이블 컴포넌트의 페이지가 undefined으로 떨어지며, 이전 상태 값을 잃어버리는 상황이 발생했다. 이렇게 되면 로컬 상태로 현재 페이지를 다뤄야하는 상황인데.. 서버 상태를 그대로 사용하면서 패칭할 수 있는 방법이 없을까 고민을 하다가 placeholderData 옵션으로 해결이 된다는 것을 알게되었다.
placeholderData란?
이전의 keepPreviousData: true 플래그 형식으로 이전 데이터를 보여줄 것인지에 대한 옵션 값으로 사용되었으나, 현재는 placeholderData: (previousData) => previousData 형태로 사용을 할 수 있다.
Tanstack Query에 placeholderData는 새 쿼리 결과가 오기 전까지 임시로 보여줄 데이터를 저장하는 옵션이다. 기본적으로 이전에 성공했던 결과 값이 전달되며, 미리 보여줄 데이터를 사전에 설정할 수 있다.
placeholderData: (previousData) => previousDataqueryKey가 바뀌어서 새 요청을 보낼 때 → 응답이 오기 전까지 화면을 비우지 않고 → 직전 데이터(위에 코드에서는 previousData)를 그대로 보여준다.
어떻게 사용할 수 있을까?
나 같은 경우에는 데이터 테이블 컴포넌트에 클라이언트 상태를 넣지 않고, 모두 서버 상태로 대치를 하기 때문에 리스트에서 placeholderData가 존재하지 않으면 data가 undefined가 되어 전체 아이템 개수가 0으로 잠깐 내려가는 현상이 발생할 수 있다. 그래서 placeholderData에 이전 데이터를 사용할 것이라 명시를 해준다면 이전 데이터 잠시 유지되며 데이터 테이블 컴포넌트가 급격하게 1페이지로 보정되는 현상을 줄일 수 있다. 즉, 로딩 중에도 이전 값을 일시적으로 유지해주는 기능이라고 생각을 하면 된다.
placeholderData는 staleTime, gcTime과 수행하는 역할이 다르기 때문에 독립적으로 운용되며 전혀 관여하지 않으니 주의하자.
