Next.js 12中React-query的refetchOnWindowFocus失效求助

核心原因 #

React Query v3 中，refetchOnWindowFocus 的合法取值是布尔值（true/false），你在单个 useQuery 中设置的字符串 "always" 是无效配置，会被忽略并 fallback 到全局设置的 false，因此切换标签页不会触发重取操作。

修复方案 #

将 useQuery 配置里的 refetchOnWindowFocus: "always" 改为布尔值 true：

const { data: campaignDetail, refetch: refetchCampaignDetail } = useQuery(
  ["getCampaignDetail", campaignId],
  async () => {
    if (campaignId) {
      const response = await getCampaignDetail(campaignId)
      setIsLoadingCampaign(false)
      return response?.data
    }
  },
  {
    refetchOnWindowFocus: true, // 修改为布尔值true
    enabled: !!campaignId,
  },
)

额外检查点 #

1. 确认切换回标签页时 campaignId 仍存在，保证 enabled 保持为 true——如果 campaignId 变为空值，enabled 会自动关闭查询，自然不会触发重取。
2. 若为查询设置了过长的 staleTime，即使触发重取逻辑，React Query 也可能因判定数据未过期而跳过实际请求，可检查是否存在这类配置。

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