如何在React Query的事件处理器中仅当数据过期时重新获取数据？

你可以通过React Query的缓存状态判断逻辑实现需求，核心是用staleTime定义数据的新鲜周期，再结合内置方法或手动判断来控制是否发起请求。

关键前提：配置staleTime #

首先给useQuery设置staleTime，它决定了数据从"新鲜"变为"过期"的时长（默认值为0，即数据一获取就过期）。比如设置5分钟的新鲜期：

import { useQuery, useQueryClient } from '@tanstack/react-query';

const fetchData = async () => { /* 你的API请求逻辑 */ };

const queryClient = useQueryClient();

const { status, data, error, refetch } = useQuery(
  ['myKey'], // 建议用数组格式的queryKey，缓存匹配更灵活
  fetchData,
  {
    enabled: false, // 初始不自动发起请求
    staleTime: 300000, // 5分钟内数据视为新鲜，按需调整时长
  }
);

实现方式一：用fetchQuery自动处理缓存逻辑 #

fetchQuery是React Query的核心方法，会自动检查缓存状态：数据新鲜则直接返回缓存，过期则发起新请求，调用后会同步useQuery的状态：

const onClick = () => {
  queryClient.fetchQuery({
    queryKey: ['myKey'],
    queryFn: fetchData,
    staleTime: 300000, // 和useQuery配置保持一致
  });
};

实现方式二：手动判断状态后调用refetch #

如果需要更灵活的控制，可以手动判断数据是否过期，再决定是否触发请求：

React Query v4+ 版本（推荐）

用内置的isStale方法直接判断缓存状态：

const onClick = () => {
  const queryState = queryClient.getQueryState(['myKey']);
  // 无缓存数据 或 数据已过期时，才发起请求
  if (!queryState || queryClient.isStale(['myKey'])) {
    refetch();
  }
};

旧版本（v3及以下）

通过dataUpdatedAt时间戳结合staleTime手动计算：

const onClick = () => {
  const queryState = queryClient.getQueryState(['myKey']);
  const isStale = !queryState || Date.now() - queryState.dataUpdatedAt > 300000;
  if (isStale) {
    refetch();
  }
};

注意事项 #

• 必须配置staleTime，否则默认数据永远处于过期状态，每次点击都会触发请求。
• 确保queryKey在所有相关调用中保持一致，保证缓存匹配正确。

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