使用Tanstack Query避免初始加载报错并保留旧数据

要实现初始加载显示加载状态，后续参数更新时保留旧数据直到新数据返回的需求，你可以通过以下两步处理：

1. 开启keepPreviousData配置 #

在useQuery中添加keepPreviousData: true选项，当查询参数（year/month/day/hour）变化时，Tanstack Query会暂时保留上一次的查询数据，直到新请求完成，不会直接将data置为undefined。

修改后的查询代码：

const fetchData = useQuery(
  ["myData", year, month, day, hour], 
  async () => {
    const response = await axios.post(`http://localhost:5000/api/data_calc`, {
        year: year,
        month: month,
        day: day,
        hour: hour,
    });     
    return response.data;
  },
  { keepPreviousData: true } // 关键配置
);

const { data, error, isInitialLoading, isFetching } = fetchData;

2. 区分初始加载与后续数据更新状态 #

• isInitialLoading：仅在第一次加载数据时为true，适合用来显示初始的"加载中..."提示
• isFetching：每次请求（包括后续参数更新的请求）都会变为true，但此时data仍保留旧数据，你可以选择显示轻量加载提示（比如小动画），无需替换当前展示的旧数据

组件渲染逻辑示例：

return (
  <div>
    {/* 初始加载时显示加载提示 */}
    {isInitialLoading ? (
      <div>加载中...</div>
    ) : (
      <>
        {/* 显示当前数据（旧数据或新请求完成后的新数据） */}
        <div>{data?.val1}</div>
        {/* 后续更新时显示轻量加载提示，不影响旧数据展示 */}
        {isFetching && <span style={{marginLeft: 10}}>正在更新数据...</span>}
      </>
    )}
    {/* 错误处理 */}
    {error && <div>数据加载失败：{error.message}</div>}
  </div>
);

补充说明 #

• 使用data?.val1的可选链操作符，能避免初始加载或异常情况下data为undefined时的报错
• keepPreviousData不仅能保留旧数据，还能让页面在参数切换时避免空白，提升用户体验

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