React中使用useQueryClient按需失效缓存查询的问题

问题分析 #

你当前的核心问题是：每次组件重渲染或切换标签页时，useTopicActivityCounts hook都会触发不必要的计数请求。根源在于你在hook顶层直接调用了invalidateQueries——这会导致每次hook执行（包括组件重渲染、topicId变化）都会强制标记查询为过时，触发重新获取，完全违背了「仅在点击主题打开面板时请求」的需求。另外代码里还有个拼写错误：invalidateQueries的key用了TopicActivitytCounts（多了一个t），和useQuery的key不一致，会导致无效查询不生效，反而可能触发额外请求。

解决方案 #

要实现目标，需要把查询刷新逻辑和组件渲染逻辑分离，只在用户点击主题的动作发生时触发刷新，而非hook的每次执行中。

1. 修正自定义hook，移除顶层无效查询并提供手动刷新方法

调整useTopicActivityCounts，保留基础查询逻辑，同时暴露手动刷新的方法，把控制权交给父组件：

export const useTopicActivityCounts = (
  topicId: string | undefined,
) => {
  const queryClient = useQueryClient();
  const { data } = useQuery(
    ['TopicActivityCounts', { topicId }], // 修正拼写错误，确保key一致
    () =>
      fetchAsync<IResult<ITopicActivityCount>>(endpointUrl, {
        method: 'GET',
        params: {
          id: topicId, // 确保参数与接口要求匹配，替换原有的id变量
        },
      }).then(resp => resp?.value),
    {
      enabled: !!topicId, // 仅当topicId存在时才执行查询
      staleTime: Infinity, // 数据永不过期，除非手动触发刷新
    },
  );

  // 提供手动刷新方法，供父组件在点击动作时调用
  const refreshCounts = () => {
    queryClient.invalidateQueries(['TopicActivityCounts', { topicId }]);
    // 也可以使用refetch：queryClient.refetchQueries(['TopicActivityCounts', { topicId }]);
  };

  return { data: data as ITopicActivityCounts | undefined, refreshCounts };
};

2. 在父组件中监听主题切换，触发刷新

在TopicDetails组件中，监听item的变化——当用户点击新主题时，自动触发计数刷新：

export const TopicDetails = memo(({ item, setItem }: ITopicDetails): JSX.Element => {
  const { data: counts, refreshCounts } = useTopicActivityCounts(item?.id);

  // 当选中的主题变化时（用户点击新主题），触发计数刷新
  useEffect(() => {
    if (item?.id) {
      refreshCounts();
    }
  }, [item?.id, refreshCounts]); // 依赖项包含主题ID和刷新方法，确保仅在主题切换时执行

  const pivotItems = [
    {
      itemKey: 'Tab1',
      headerText: localize('Resx.Comms', { count: counts?.commentsCount ?? '0' }),
    },
    {
      itemKey: 'Tab2',
      headerText: localize('Resx.Activities', { count: counts?.activitiesCount ?? '0' }),
    },
  ];

  return (
    /* 页面内容 */
  );
});

3. 额外注意事项

• 确保查询key完全一致：之前的拼写错误会导致无效查询找不到对应缓存，必须修正。
• 参数匹配：确认params中的id对应topicId，避免接口请求参数错误。
• staleTime: Infinity的作用：设置后数据不会自动过期，只有手动调用invalidateQueries或refetch时才会重新获取，完全符合「仅点击主题时请求」的需求。

为什么之前的方法无效？ #

• 顶层调用invalidateQueries：每次组件重渲染（比如切换标签页）都会执行，强制触发重新请求。
• 把失效逻辑放在onSuccess：仅在查询成功时执行，无法响应用户点击动作，还会导致每次查询成功后都失效，陷入循环请求。

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