使用useQuery时如何保留之前成功获取的数据？

要搞定这个问题，你可以借助React Query的配置项来保留历史数据，下面是两种实用方案：

方案一：开启keepPreviousData（推荐） #

这个配置会在新请求发起（不管成功还是失败）时，保留上一次成功获取的数据，直到新请求拿到有效结果。修改你的useQuery代码：

import queryString from "query-string";
import { useRouter } from "next/router";
  
const { query } = useRouter();

const { data: statsData, isLoading: statsLoading, isError } = useQuery(
    ["stats", queryString.stringify(query)],
    ({ queryKey }) =>
      axios.get(`/statistics?${queryKey[1]}`).then(({ data }) => data),
    {
      onError: () => showErrMessage("500"),
      keepPreviousData: true, // 新增这行配置
    }
);

这样哪怕新请求失败，statsData依然会保留之前成功请求返回的数据，不会变成空值。

方案二：设置staleTime延长数据有效期 #

如果你的数据不需要实时更新，可以通过staleTime设置一段有效期，在这段时间内，即使请求失败，React Query也不会清空已有的数据：

const { data: statsData, isLoading: statsLoading } = useQuery(
    ["stats", queryString.stringify(query)],
    ({ queryKey }) =>
      axios.get(`/statistics?${queryKey[1]}`).then(({ data }) => data),
    {
      onError: () => showErrMessage("500"),
      staleTime: 5 * 60 * 1000, // 数据5分钟内视为有效，不会因请求失败清空
    }
);

额外小技巧 #

你可以配合isError状态给用户显示错误提示，同时正常展示旧数据：

{isError && <div>数据加载失败，请稍后重试</div>}
{statsData?.total_sales}

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