WordPress REST API更新数据无法同步到React，需强制刷新

你的问题核心是React Query默认的缓存策略不会主动监听WordPress API的数据变化，同时可能存在WordPress端的API缓存干扰，以下是针对性解决方案：

1. 配置React Query自动刷新规则 #

通过调整useQuery的参数，让组件主动定期请求或在窗口聚焦时刷新数据：

const {
  isLoading,
  data,
  isError,
  error,
  isFetching
} = useQuery(
  'blog-post', fetchBlog, {
    cacheTime: 5000,
    staleTime: 0, // 标记数据立即过期，触发后续自动刷新
    refetchInterval: 3000, // 每3秒自动重新请求数据
    refetchOnWindowFocus: true, // 浏览器窗口重新聚焦时触发刷新
  }
)

2. 手动触发数据刷新 #

如果不需要定时刷新，可以通过refetch方法手动控制，比如添加刷新按钮或在特定事件触发时调用：

const {
  isLoading,
  data,
  isError,
  error,
  isFetching,
  refetch // 获取手动刷新方法
} = useQuery(
  'blog-post', fetchBlog, {
    cacheTime: 5000,
  }
)

// 示例：组件挂载后每5秒手动刷新一次
useEffect(() => {
  const refreshTimer = setInterval(() => {
    refetch();
  }, 5000);
  
  return () => clearInterval(refreshTimer);
}, [refetch])

3. 绕过WordPress API的缓存 #

WordPress默认会对API请求做缓存处理，导致你拿到的是旧数据。可以在请求时添加时间戳参数，强制获取最新数据：

// 修改你的fetchBlog函数
const fetchBlog = async () => {
  const response = await axios.get('你的WordPress API地址/wp-json/wp/v2/posts', {
    params: {
      _: Date.now() // 添加时间戳参数，避免WordPress返回缓存数据
    }
  });
  return response;
};

4. 确认缓存时间配置合理性 #

你设置的cacheTime: 5000表示数据在缓存中保留5秒，但React Query的staleTime默认是0（数据立即过期），但如果没有触发刷新机制，过期数据也不会自动重新请求。结合前面的刷新配置可以解决这个问题。

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