[TanStakQuery] Placeholder Query Data

placeholder data가 뭔가요?

Placeholder 데이터를 사용하면 initialData 옵션과 유사하게 쿼리가 이미 데이터가 있는 것처럼 동작하지만 데이터가 캐시에 지속되지 않습니다. 이는 실제 데이터가 백그라운드에서 fetched 되는 동안 쿼리를 성공적으로 렌더링할 수 있는 충분한 부분(또는 가짜) 데이터가 있는 경우에 유용합니다.

"예시: 개별 블로그 글 쿼리는 제목과 글 본문의 작은 스니펫만 포함하는 블로그 글의 상위 목록에서 '미리 보기' 데이터를 가져올 수 있습니다. 이 부분 데이터를 개별 쿼리의 쿼리 결과에 유지하려는 것은 아니지만, 실제 쿼리가 완료되어 전체 개체를 가져오는 동안 콘텐츠 레이아웃을 가능한 한 빨리 표시하는 데 유용합니다."

쿼리에 대한 placeholder 데이터를 필요하기 전에 캐시에 제공하는 몇 가지 방법이 있습니다:

• 선언형:
  • 비어 있는 경우 캐시를 미리 채우도록 쿼리에 placeholderData를 제공합니다.
• 명령형:
  • ueryClient 및 placeholderData 옵션을 사용하여 데이터를 prefetch하거나 fetch합니다.

Plcaeholder Data as a Value

function Todos() {
  const result = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/todos'),
    placeholderData: placeholderTodos,
  })
}

Placeholder Data Memoization

쿼리의 placeholder 데이터에 접근하는 과정이 intensive하거나 매 렌더링할 때마다 수행하지 않으려는 경우 값을 메모리에 저장할 수 있습니다:

function Todos() {
  const placeholderData = useMemo(() => generateFakeTodos(), [])
  const result = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/todos'),
    placeholderData,
  })
}

Placeholder Data from Cache

경우에 따라 다른 쿼리의 캐시된 결과에서 쿼리에 대한 placeholder 데이터를 제공할 수 있습니다. 블로그 글 목록 쿼리에서 캐시된 데이터를 검색하여 글의 미리 보기 버전을 찾은 다음 이를 개별 글 쿼리의 placeholder 데이터로 사용하는 것이 좋은 예입니다:

function Todo({ blogPostId }) {
  const result = useQuery({
    queryKey: ['blogPost', blogPostId],
    queryFn: () => fetch(`/blogPosts/${blogPostId}`),
    placeholderData: () => {
      // Use the smaller/preview version of the blogPost from the 'blogPosts'
      // query as the placeholder data for this blogPost query
      return queryClient
        .getQueryData(['blogPosts'])
        ?.find((d) => d.id === blogPostId)
    },
  })
}

Further reading

Placeholder Data와 Initial Data를 비교하려면 커뮤니티 리소스를 참조하세요.

Reference

• Placeholder Query Data | TanStack Query Docs