React Query切换博客ID时如何立即获取新数据而非先显示缓存？

问题出在你的queryKey设置上——你只用了["getBlogPost"]作为查询标识，没有把blogPostId包含进去。这会导致React Query将所有博文请求都映射到同一个缓存条目，切换博文ID时，它会先返回之前缓存的旧数据，同时发起新请求，所以才会出现先显示上一篇内容再刷新的情况。

修改方案 #

把queryKey改成包含blogPostId的数组，让每个博文ID对应独立的缓存条目：

const BlogPost = () => {
  const { blogPostId } = useParams();

  const { data: blogPostData, isLoading } = useQuery<BlogPostType>({
    // 将blogPostId加入queryKey，确保每个ID对应独立缓存
    queryKey: ["getBlogPost", blogPostId],
    queryFn: () => apiClient.getPostById(blogPostId),
  });

  // 可选：添加加载状态提示，避免请求期间显示空白或旧内容
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>{blogPostData?.title}</h1>
      <hr/>
      <p>{blogPostData?.description}</p>
    </div>
  );
};

原理说明 #

React Query通过queryKey来区分不同的查询，只有当queryKey完全匹配时，才会返回对应的缓存数据。把blogPostId加入queryKey后，切换博文ID相当于触发了一个全新的查询，React Query不会再复用之前的旧缓存，而是直接针对新ID发起请求（如果该ID没有缓存的话），或者返回该ID对应的已有缓存，这样就能避免显示上一篇的内容。

内容的提问来源于stack exchange，提问作者Ofir