React-Query：如何阻止组件内其他useQuery随目标查询触发执行？

当在组件中同时使用多个useQuery时，调用其中一个的refetch方法会引发组件重渲染，进而导致其他useQuery也重复执行，可通过以下几种方式解决：

1. 为不需要自动执行的useQuery关闭自动refetch配置 #

React Query的useQuery默认会在组件挂载、窗口聚焦、网络重连时自动触发refetch，我们可以通过配置选项关闭这些自动触发行为，让查询仅在手动调用refetch或查询键变化时执行。

修改示例代码如下：

function App() {
  // 定义通用的静态查询配置
  const staticQueryConfig = {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  };

  const query1 = useQuery(['query1'], someFn, staticQueryConfig);
  const query2 = useQuery(['query2'], anotherFn, staticQueryConfig);
  const query3 = useQuery(['query3'], lastfn);

  return <>
      {query3.data?.map(data => <span>{data.id}</span>)}
       <button onClick={() => query3.refetch()}>click</button>
  </>
}

2. 将不同useQuery拆分到独立子组件中 #

把每个useQuery封装到单独的子组件里，利用React的渲染优化机制——当父组件重渲染时，若子组件的props未发生变化，React会跳过子组件的重渲染，从而避免子组件内的useQuery被触发。

示例代码拆分后：

// 封装query1的子组件
function Query1View() {
  const query1 = useQuery(['query1'], someFn);
  return <div>{query1.data}</div>;
}

// 封装query2的子组件
function Query2View() {
  const query2 = useQuery(['query2'], anotherFn);
  return <div>{query2.data}</div>;
}

// 主组件仅处理query3相关逻辑
function App() {
  const query3 = useQuery(['query3'], lastfn);

  return <>
      <Query1View />
      <Query2View />
      {query3.data?.map(data => <span>{data.id}</span>)}
       <button onClick={() => query3.refetch()}>click</button>
  </>
}

3. 确保查询函数引用稳定 #

如果查询函数是在组件内部定义的，每次组件渲染都会生成新的函数引用，可能被React Query判定为查询依赖变化，从而触发重新执行。这种情况下可以：

• 将查询函数定义在组件外部，确保全局唯一引用
• 若查询函数依赖组件内变量，使用useCallback包裹，稳定函数引用

示例：

// 把查询函数定义在组件外部
const someFn = async () => {
  const res = await fetch('/api/query1');
  return res.json();
};

function App() {
  const query1 = useQuery(['query1'], someFn);
  // ...其他代码
}

或者使用useCallback处理带依赖的查询函数：

function App() {
  const userId = 123;
  // 用useCallback稳定函数引用
  const fetchUser = useCallback(async () => {
    const res = await fetch(`/api/user/${userId}`);
    return res.json();
  }, [userId]);

  const userQuery = useQuery(['user', userId], fetchUser);
  // ...其他代码
}

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