문제 상황
데이터를 이름 순이나 마지막 수정일 순으로 정렬할 때, query parameter에 담아 서버로 보내는데 새로운 쿼리로 다시 요청을 할 때 보이는 no data가 굉장히 거슬렸다.
처음엔 로딩 컴포넌트를 넣을까 하다가 짧은 시간에 로딩 컴포넌트가 보이는 것도 그저 거슬리게 깜빡이는 것으로 느껴졌다.
React-query
데이터 관리를 react-query로 하고 있는데
react-query는 로딩 중이거나 데이터를 새로고침할 때 발생할 수 있는 화면의 깜빡임이나 불필요한 대기 시간을 최소화 해줄 다양한 기능을 제공한다.
keepPreviousData
keepPreviousData : 데이터 패칭 중에 이전 쿼리의 데이터를 유지할 수 있도록 합니다.
사실 가장 처음 눈에 띈 것이 해당 keepPreviousData 옵션이었다.
요구사항과 맞았고 적용하는 것도 아주 간단하여
keepPreviousData : true위와 같이 바로 적용해보았는데
알려진 속성만 지정할 수 있다는 오류가 계속 발생했다...
v5 keepPreviousData 제거
이유를 찾아보니
v5부터 keepPreviousData 옵션과 isPreviousData 플래그가 제거되었다는 것이다.
왜냐하면 이들은 각각 placeholderData와 isPlaceholderData 플래그와 거의 유사하게 동작하기 때문.
placeholderData
placeholderData: 쿼리가 로딩 중일 때 사용할 임시 데이터를 지정합니다.
이 옵션을 사용하면 실제 데이터가 로드될 때까지 사용자에게 빈 화면이나 로딩 인디케이터 대신 초기 상태나 기본 데이터를 보여줄 수 있다.
예를 들어, 사용자가 게시글 목록을 요청했을 때, 서버로부터 실제 데이터를 받아오기 전까지 간단한 메시지나 기본적인 레이아웃을 보여주는 용도로 활용할 수 있다.
placeholderData - keepPreviousData활용
placeholderData를 활용하면서 이전에
keepPreviousData : true로 줬을때와 동일한 기능을 수행하기 위해 identity function을 허용하는 placeholderData에 Tanstack Query에 포함된 keepPreviousData 함수를 추가하여 구현할 수 있다.
적용한 코드
import { keepPreviousData } from '@tanstack/react-query'
export const useDocumentQuery = (
//-----코드 중략-----//
return useQuery({
queryKey: ['document', id, queryParams],
queryFn: () => documentService.getDocuments(queryParams),
select: (data) => ({
documents: formatDocumentData(data.data.data.documents),
writingToneCounts: data.data.data.writingToneCounts,
}),
placeholderData: keepPreviousData,
})
}
placeholderData - identity function 작성
또는, 직접 identity function을 제공하는 방법도 있다.
이는 처리해야하는 상황에 유리할 것으로 보인다.
useQuery({
queryKey,
queryFn,
placeholderData: (previousData) => previousData,
});변경사항 주의점
placeholderData는 항상 success 상태를 유지하며, keepPreviousData는 이전 쿼리 상태를 알려준다. 데이터를 성공적으로 가져온 후 background refetch error가 발생하면 placeholderData의 success 상태는 오류라고 느낄 수 있다.
하지만 에러 자체가 공유되지 않기 때문에 placeholderData의 동작은 그대로 유지된다.
적용 결과
