React Query 如何仅调用一次 API 接口？

使用 React Query 的 useQuery 钩子，并通过合理配置，可以确保 API 只被调用一次。React Query 会自动对相同的查询键进行请求去重，保证不会重复发起请求。

示例代码

javascript
import { useQuery } from 'react-query';

// 定义你的 API 请求函数
const fetchMyApi = async () => {
  // 替换为你的实际 API 地址
  const response = await fetch('https://my-api/service');
  if (!response.ok) {
    throw new Error('网络响应异常');
  }
  return response.json();
};

function MyComponent() {
  // 使用 useQuery 钩子获取数据
  const { data, error, isLoading, isFetching } = useQuery(
    'myUniqueQueryKey', // 查询唯一键，React Query 用于管理缓存
    fetchMyApi,         // 请求函数
    {
      // 可选配置项
      staleTime: Infinity,           // 数据永不过期，不会自动重新请求
      refetchOnWindowFocus: false,   // 窗口聚焦时不自动重新请求
      retry: false,                  // 请求失败不自动重试
      refetchOnMount: false,         // 组件重新挂载时不重新请求（如果已有缓存）
    }
  );

  if (isLoading) {
    return <span>加载中...</span>;
  }

  if (error) {
    return <span>发生错误：{error.message}</span>;
  }

  // 展示数据
  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

配置说明

• staleTime: Infinity 数据永不过期，除非手动失效，否则不会重新请求。
• refetchOnWindowFocus: false 切换窗口时不自动重新请求。
• retry: false 请求失败时不自动重试。
• refetchOnMount: false 组件重新挂载时，如果缓存存在，不会重新请求。

机制说明

• 只要查询键（如 'myUniqueQueryKey'）相同，React Query 会自动复用缓存数据，不会重复请求。
• 只有在缓存失效或被主动清除时，才会重新请求。
• 多个组件使用相同查询键时，共享同一份数据。

注意事项

React Query 默认认为数据可能会变化，因此默认会比较频繁地重新请求。通过上述配置可以完全控制请求行为，适合数据稳定、只需请求一次的场景。