stateTime与refetchOnMount对比：避免组件每次挂载时重新请求

一、refetchOnMount: false的优缺点 #

• 优点：逻辑直白，精准管控组件挂载时的重取行为。只要查询缓存中存在数据（无论是否过期），组件重新挂载时都不会触发请求；若缓存为空，首次挂载仍会正常发起请求。
• 缺点：如果缓存数据已过默认staleTime（0秒），即便组件重新挂载，也不会自动拉取最新数据。后续若需更新数据，必须手动调用refetch()方法。

二、staleTime: Infinity的优缺点 #

• 优点：将查询数据标记为永久新鲜，TanStack Query会始终认为缓存数据有效，无论组件挂载多少次都不会主动发起请求。同时，所有依赖该查询的组件都会共享这份永久缓存，从根源避免重复请求。
• 缺点：缓存数据会一直保留在内存中（除非手动清理），后端数据更新时前端无法自动感知。若需同步最新数据，必须手动执行invalidateQueries或refetch操作。

三、更适配"仅执行一次请求"场景的替代方案 #

如果你希望严格保证请求只执行一次（哪怕缓存被清理也不再发起），可以结合enabled选项和状态控制：

const [hasFetched, setHasFetched] = useState(false);

const { data } = useQuery({
  queryKey: ['uniqueKey'],
  queryFn: fetchData,
  enabled: !hasFetched,
  onSuccess: () => setHasFetched(true),
});

• 原理：通过enabled控制查询仅在hasFetched为false时执行，请求成功后将hasFetched设为true，后续无论组件如何挂载，查询都不会再触发。
• 适用场景：完全不需要后续更新、数据一旦获取就不再变化的场景。

另外，如果需要保留缓存但允许手动更新，推荐组合使用staleTime: Infinity + refetchOnMount: false，既避免自动重取，又能通过手动方法更新数据。

内容的提问来源于stack exchange，提问作者Cristian Flórez