플레이스홀더 쿼리 데이터

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

자리표시자 데이터 메모이제이션

쿼리의 플레이스홀더 데이터에 접근하는 과정이 집약적이거나 매번 렌더링할 때 수행하고 싶지 않다면 값을 메모이제이션할 수 있습니다:

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

const todosQuery = useQuery(() => ({
  queryKey: ['todos', id],
  queryFn: () => fetch(`/todos/${id}`),
  placeholderData: (previousData, previousQuery) => previousData,
}))

function BlogPost(props) {
  const queryClient = useQueryClient()
  const blogPostQuery = useQuery(() => ({
    queryKey: ['blogPost', props.blogPostId],
    queryFn: () => fetch(`/blogPosts/${props.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 === props.blogPostId)
    },
  }))
}