多组件共用useQuery自定义hook时stopPolling失效问题求助

我编写了如下自定义Hook useGetPosts：

const useGetPosts = () => {
  const {data, isLoading, error, stopPolling, startPolling} = useQuery(GET_POSTS_QUERY);

  useEffect(() => {
    startPolling(10000);
  }, []);

  return {
    data,
    isLoading,
    error, 
    stopPolling
  }
}

我在多个组件中使用该Hook获取帖子数据。问题在于，当我在某一个组件中调用stopPolling()函数试图停止轮询时，查询仍会重新获取数据，原因是还有其他挂载的组件在调用该Hook。

我曾考虑将所有stopPolling函数存入数组，需要时遍历调用，但这并非简洁的最优方案。请问有没有更好的解决思路？

解决方案 #

问题根源 #

你当前的实现中，每个组件调用useGetPosts时都会独立执行startPolling(10000)，相当于多份轮询任务同时生效。单个组件调用stopPolling只能终止自身触发的轮询，其他组件启动的轮询仍会继续触发查询。

方案1：用全局状态（Context）统一控制轮询开关 #

这是最简洁且易维护的方案，通过Context共享轮询状态，让所有订阅该查询的组件共用同一个轮询配置：

1. 创建轮询控制Context

import { createContext, useContext, useState } from 'react';

const PollingControlContext = createContext();

export const PollingControlProvider = ({ children }) => {
  // 全局控制轮询是否开启
  const [isPollingActive, setIsPollingActive] = useState(true);

  return (
    <PollingControlContext.Provider value={{ isPollingActive, setIsPollingActive }}>
      {children}
    </PollingControlContext.Provider>
  );
};

// 自定义Hook供组件使用
export const usePollingControl = () => useContext(PollingControlContext);

2. 修改useGetPosts Hook

import { usePollingControl } from './PollingControlContext';

const useGetPosts = () => {
  const { isPollingActive } = usePollingControl();
  
  // 直接通过pollInterval配置控制轮询，无需手动调用start/stopPolling
  const { data, isLoading, error } = useQuery(GET_POSTS_QUERY, {
    pollInterval: isPollingActive ? 10000 : false,
  });

  return {
    data,
    isLoading,
    error,
    // 提供全局启停方法
    stopPolling: () => setIsPollingActive(false),
    startPolling: () => setIsPollingActive(true)
  }
}

3. 在根组件包裹Provider
   确保所有使用useGetPosts的组件都在PollingControlProvider范围内：

function App() {
  return (
    <PollingControlProvider>
      {/* 你的组件树 */}
      <PostList />
      <PostDetail />
    </PollingControlProvider>
  );
}

这样，任何组件调用stopPolling都会全局关闭轮询，所有关联组件的查询都会停止自动刷新；调用startPolling则恢复轮询。

方案2：通过QueryClient直接修改查询配置 #

利用React Query的QueryClient直接修改目标查询的全局配置，无需额外Context：

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

const useGetPosts = () => {
  const queryClient = useQueryClient();
  
  const { data, isLoading, error } = useQuery(GET_POSTS_QUERY, {
    pollInterval: 10000,
  });

  const stopPollingGlobally = () => {
    // 修改该查询的全局默认轮询间隔为false（停止轮询）
    queryClient.setQueryDefaults(GET_POSTS_QUERY, {
      pollInterval: false,
    });
    // 可选：立即取消当前正在进行的查询
    queryClient.cancelQueries(GET_POSTS_QUERY);
  };

  const startPollingGlobally = () => {
    queryClient.setQueryDefaults(GET_POSTS_QUERY, {
      pollInterval: 10000,
    });
  };

  return {
    data,
    isLoading,
    error,
    stopPollingGlobally,
    startPollingGlobally
  }
}

这种方案直接操作查询的全局配置，所有订阅该查询的组件都会同步生效，适合不需要复杂状态控制的场景。

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