API响应不用于组件输出时，使用React Query是否具备优势？

哪怕你只是把接口返回值赋值给全局变量，用React Query替代这段useEffect的实现依然有不少实打实的优势，具体原因如下：

• 自带请求重试与错误处理
  React Query内置了可配置的请求重试机制，你能直接设置重试次数、延迟时间。要是/api/environment偶尔超时或者返回5xx错误，它会自动帮你重试，不用你自己在useEffect里手写try/catch加定时器的容错逻辑，省了不少样板代码。

• 避免重复请求，自动缓存
  如果你的应用里有多个组件都需要执行这段获取环境配置的逻辑，传统的useEffect实现会触发多次重复请求。而React Query会自动缓存请求结果，同一个queryKey的请求只会发起一次，后续组件再调用直接用缓存数据，能减少不必要的服务器资源消耗。

• 无需手动维护请求状态
  就算你不用把状态渲染到组件上，React Query也会帮你追踪请求的加载、成功、失败状态。你可以利用这些状态做额外逻辑，比如请求失败时打日志，或者加载完成后触发其他全局操作，不用自己手动定义isLoading、error这类状态变量。

• 轻松实现后台刷新与数据同步
  要是后续你需要让这个全局变量和后端保持同步（比如环境配置更新时自动刷新），React Query的refetchInterval（定时刷新）或者refetchOnWindowFocus（窗口聚焦时刷新）功能可以直接用，不用自己写定时器或者监听窗口事件。

• 代码结构更清晰
  把请求逻辑抽离到React Query的useQuery钩子中，代码职责划分更明确。你可以把接口地址、重试策略这些配置集中管理，而不是散落在各个useEffect的回调函数里，后期维护起来更方便。

用React Query实现的示例代码 #

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

const useEnvironmentConfig = () => {
  return useQuery({
    queryKey: ['environment'], // 唯一标识这个请求的key
    queryFn: async () => {
      const res = await axios.get('/api/environment');
      window.localUrl = res.data.url; // 赋值给全局变量
      return res.data;
    },
    retry: 3, // 配置失败后重试3次
    refetchOnWindowFocus: false // 根据需求决定是否在窗口聚焦时刷新
  });
};

// 在任意组件中调用即可
const SomeComponent = () => {
  useEnvironmentConfig();
  // 组件其他逻辑
  return <div>...</div>;
};

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