useQuery键变更、组件卸载重挂载后如何持久化保留旧数据

keepPreviousData 设计上仅在单组件挂载周期内生效：当query key变更、新key对应query尚未返回数据时，它会临时返回旧key的缓存数据保证UI连续，但这个临时值不会写入新key的缓存条目，组件卸载后临时引用会直接回收，重挂载时无法跨周期读取。

问题本质原因：

• 修改Redux中filter值后，query key同步变化，React Query会立即为新key创建初始值为undefined的空缓存
• 由于enabled: false配置，新key的query不会自动发起请求填充缓存，空缓存会一直保留
• 组件挂载阶段keepPreviousData会兜底返回旧key数据，但组件卸载重挂载后，只会读取当前新key对应的空缓存，因此展示undefined

按推荐优先级排序：

方案1：拆分草稿筛选条件与已生效筛选条件（最优解） #

这是最贴合当前交互逻辑的方案，从根源避免生成无意义的空缓存：

• Redux中拆分两个独立状态：draftFilter存储用户实时编辑的筛选草稿，appliedFilter存储用户点击「应用筛选」后真正生效的筛选值
• 仅将appliedFilter作为query key的依赖项，用户编辑草稿时不会触发query key变更，自然不会生成undefined缓存
• 点击「应用筛选」时再同步更新appliedFilter，同时触发对应query的refetch即可

代码示例：

export const useGetData = () => {
  // 仅取已生效的筛选条件作为query依赖
  const { appliedFilter } = useSelector((state) => state.filterReducer);

  const queryInfo = useQuery(["filter", appliedFilter], () => getData(appliedFilter), {
    staleTime: Infinity,
    cacheTime: Infinity,
    enabled: false,
    keepPreviousData: true
  });

  return queryInfo;
};

// 「应用筛选」按钮点击逻辑
const handleApply = () => {
  // 把草稿值同步为生效值
  dispatch(setAppliedFilter(draftFilter));
  // 触发新条件的请求
  queryClient.refetchQueries(["filter", draftFilter]);
};

这个方案逻辑最清晰，没有黑魔法，完全符合用户「修改后点确认才生效」的交互预期，不会出现缓存和UI状态不一致的问题。

方案2：手动持久化上一次成功数据作为兜底 #

如果不想调整现有Redux状态结构，可以在hook内用ref存储上一次请求成功返回的数据，当前query数据为空时兜底返回该值：

export const useGetData = () => {
  const { filter } = useSelector((state) => state.filterReducer);
  // 跨渲染周期存上一次成功的有效数据
  const lastValidData = useRef(null);

  const queryInfo = useQuery(["filter", filter], () => getData(filter), {
    staleTime: Infinity,
    cacheTime: Infinity,
    enabled: false,
    keepPreviousData: true,
    onSuccess: (data) => {
      // 请求成功时更新存的有效值
      lastValidData.current = data;
    }
  });

  return {
    ...queryInfo,
    // 优先取当前query数据，空的时候返回上一次有效值
    data: queryInfo.data ?? lastValidData.current
  };
};

注意如果业务里有重置筛选、清空数据的需求，需要同步手动清空ref存储的值，避免脏数据残留。

方案3：用placeholderData实现跨周期占位 #

利用React Query的placeholderData配置，直接从现有缓存中读取最近一次有效数据作为占位值，该配置在缓存读取阶段生效，不受组件挂载/卸载影响：

export const useGetData = () => {
  const queryClient = useQueryClient();
  const { filter } = useSelector((state) => state.filterReducer);

  const queryInfo = useQuery(["filter", filter], () => getData(filter), {
    staleTime: Infinity,
    cacheTime: Infinity,
    enabled: false,
    // 从同前缀的缓存中找最近的有效数据作为占位
    placeholderData: () => {
      const allFilterCaches = queryClient.getQueriesData(["filter"]);
      return allFilterCaches.find(([_, data]) => data != null)?.[1];
    }
  });

  return queryInfo;
};

当前配置已经设置了cacheTime: Infinity，旧key的有效缓存会永久保留，这个方案可以完全实现「卸载重挂载后仍展示上一次有效数据」的效果，不需要改动现有状态逻辑。

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