[TanStack Query / React Query] 데이터 관리 기능: prefetchQuery, setQueryData, placeholderData, initialData

	where to use?	data from?	캐시 저장 여부
prefetchQuery	queryClient 메서드	server	O
setQueryData	queryClient 메서드	client	O
placeholderData	useQuery 옵션	client	X
initialData	useQuery 옵션	client	O

 

 

1. prefetchQuery

 

• 데이터를 미리 가져와서 캐시에 저장하는 기능입니다
• 사용자가 특정 페이지나 컴포넌트에 방문하기 전에 미리 데이터를 로드할 때 유용합니다
• queryClient 메서드 입니다

const queryClient = useQueryClient()

// 미리 데이터 fetch
await queryClient.prefetchQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList
})

 

 

https://daunje0.tistory.com/206

[TanStack Query / React Query] prefetchQuery : 데이터 선제적 로딩

 

 

2. setQueryData

 

• 캐시된 쿼리 데이터를 직접 수정할 수 있는 메서드입니다
• 서버 요청 없이 로컬 데이터를 즉시 업데이트할 때 사용합니다
• mutate ( 추가, 삭제, 업데이터) 후 변형된 데이터를 먼저 화면에 보여주고, 변형된 데이터를 서버에서 가져오기
  전까지 화면에 보여주는 용도로 사용합니다.
• queryClient 메서드 입니다

const queryClient = useQueryClient()

// 캐시 데이터 직접 수정
queryClient.setQueryData(['todo', 5], (old) => ({
  ...old,
  title: '새로운 제목'
}))

 

https://daunje0.tistory.com/213

[TanStack Query / React Query] setQueryData : Mutation 응답으로부터의 업데이트

 

3. placeholderData

 

• 쿼리가 로딩 중일 때 임시로 보여줄 데이터를 지정합니다
• 실제 데이터가 도착하기 전까지 UI에 표시할 임시 데이터로 사용됩니다
• useQuery 옵션 입니다

const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
  placeholderData: [
    { id: 1, title: '임시 할일' }
  ]
})

 

 

4. placeholderData

 

• 쿼리의 초기 데이터를 설정합니다
• placeholderData와 달리 실제 캐시에 저장되며, 캐시된 것처럼 취급됩니다
• useQuery 옵션 입니다

const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
  initialData: [
    { id: 1, title: '초기 할일' }
  ]
})

 

 

5.  placeholderData vs initialData 주요 차이점

 

placeholderData 는 이름처럼 임시 데이터로 취급이 되며 캐시에 저장이 되지 않고 로딩 상태에서만 사용됩니다.

 

이에 반해 initialData 는 실제 데이터로 취급 되며, 캐시에 저장이 되고, staleTime과 cacheTime의 영향을 받습니다.