占位查询数据

什么是占位数据？

占位数据（placeholder data）允许一个查询表现得如同它已经拥有数据一样，其效果类似于 initialData 选项，但该数据不会被持久化到缓存中。这在你拥有足够部分数据（或模拟数据）来成功渲染查询结果、同时实际数据仍在后台拉取的场景下非常有用。

示例：单篇博客文章查询可从父级博客文章列表中提取“预览”数据，该列表仅包含文章标题和正文的一小段摘要。你并不希望将这种部分数据持久化为该单篇文章查询的结果，但它有助于尽快展示内容布局，而真实查询则在后台完成整篇文章对象的拉取。

有几种方式可在需要之前向缓存中提供查询的占位数据：

• 声明式：
  • 向查询提供 placeholderData，以便在缓存为空时预先填充其缓存
• 命令式：
  • 使用 queryClient 及 placeholderData 选项预取或拉取数据

当我们使用 placeholderData 时，查询将不会处于 pending 状态——它会以 success 状态启动，因为我们已有 data 可供显示——即使该数据只是“占位”数据。为将其与“真实”数据区分开，查询结果上还会将 isPlaceholderData 标志设为 true。

占位数据作为值

1const result = useQuery({2  queryKey: ['todos'],3  queryFn: () => fetch('/todos'),4  placeholderData: placeholderTodos,5})

占位数据作为函数

placeholderData 还可以是一个函数，在其中你可以访问“上一次”成功查询的数据及查询元信息（Query meta information）。当你希望将一个查询的数据用作另一个查询的占位数据时，这种方式非常有用。当查询键（QueryKey）发生变化时（例如从 ['todos', 1] 变为 ['todos', 2]），我们可以继续显示“旧”数据，而不是在数据从一个查询过渡到下一个查询期间显示加载指示器。更多信息，请参阅 分页查询。

1const result = useQuery({2  queryKey: ['todos', id],3  queryFn: () => fetch(`/todos/${id}`),4  placeholderData: (previousData, previousQuery) => previousData,5})

来自缓存的占位数据

在某些情况下，你可能可以从另一个查询的缓存结果中为当前查询提供占位数据。一个典型示例是：在博客文章列表查询的缓存数据中搜索某篇文章的预览版本，然后将该预览数据用作单篇文章查询的占位数据：

1const result = useQuery({2  queryKey: ['blogPost', blogPostId],3  queryFn: () => fetch(`/blogPosts/${blogPostId}`),4  placeholderData: () => {5    // Use the smaller/preview version of the blogPost from the 'blogPosts'6    // query as the placeholder data for this blogPost query7    return queryClient8      .getQueryData(['blogPosts'])9      ?.find((d) => d.id === blogPostId)10  },11})