공식문서 : https://tanstack.com/query/v4/docs/guides/placeholder-query-data

Placeholder Query Data

What is placeholder data?

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

예시 : 개별 블로그 포스트 쿼리는 제목과 post body의 작은 조각만 포함하는 블로그 post의 상위 목록에서 "preview" 데이터를 가져올 수 있다. 개별 쿼리의 쿼리 결과에 대해 이 부분 데이터를 유지하진 않겠지만, 실제 쿼리가 전체 객체를 fetch하는 동안 컨텐츠 레이아웃을 가능한 빨리 표시하는데 유용하다.

필요한 경우 몇가지 방법으로 캐시에 placeholder 데이터를 제공할 수 있다:

• 선언적으로
  • 캐시가 비어있는 경우 미리 채우기 위해 쿼리에 placeholderData 제공
• 명령적으로
  • queryClient 및 placeholderData 옵션을 사용하여 데이터 prefetch 또는 fetch

Placeholder Data as a Value

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

Placeholder Data as a Function

쿼리의 placeholder 데이터에 엑세스하는 프로세스가 집약적이거나 모든 렌더링에서 수행하고 싶은 작업이 아닌 경우, 값을 메모하거나 메모된 함수를 placeholderData 값으로 전달할 수 있다.

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

Placeholder Data from Cache

경우에 따라 다른 쿼리의 캐시된 결과에서 쿼리에 대한 placeholder 데이터를 제공할 수 있다. 이에 대한 좋은 예시는 블로그 포스트 목록 쿼리에서 포스트 preview 버전에 대한 캐시된 데이터를 검색한 다음, 해당 데이터를 개별 post 쿼리의 placeholder 데이터로 사용하는 것이다.

function Todo({ blogPostId }) {
  const result = useQuery(['blogPost', blogPostId], () => 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를 비교하려면 Community Resources를 참고해라.