How to use Lazy query with React- query ?

确实，React Query 是一个强大的数据同步库，它主要用于在 React 应用中进行数据获取、缓存和更新。延迟查询是指在某些条件成立时，才触发查询。在 React Query 中，可以通过几种方式实现延迟查询：

使用 enabled 选项

React Query 的 useQuery 钩子接收一个 enabled 选项，该选项是一个布尔值，用于控制查询是否自动运行。如果 enabled 设置为 false，查询将不会自动触发，你可以在条件成立时将其设置为 true 来手动触发查询。

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

function MyComponent({ userId }) {
  const { data, error, isLoading } = useQuery(
    ['user', userId],
    () => fetchUserById(userId),
    {
      // 只有当 userId 存在时，才启用查询
      enabled: !!userId,
    }
  );

  // 当 userId 不存在时，查询不会触发
  // 可以在此添加额外的 UI 或逻辑处理
  if (!userId) {
    return '请输入用户ID';
  }

  // Render your UI with data, error, or loading states
}

使用 useQuery 的手动触发

除了 enabled 属性之外，你还可以通过 queryClient 对象手动触发查询。使用 queryClient.fetchQuery 方法，可以在任意时刻获取数据，不需要依赖 useQuery 的自动触发机制。

jsx
import { useQuery, useQueryClient } from 'react-query';

function MyComponent({ userId }) {
  const queryClient = useQueryClient();

  const { data, error, isLoading } = useQuery(['user', userId], fetchUserById, {
    enabled: false,
  });

  const fetchUser = () => {
    if (userId) {
      queryClient.fetchQuery(['user', userId], fetchUserById);
    }
  };

  // 可以在用户执行某个操作时调用 fetchUser，比如点击按钮
  return (
    <button onClick={fetchUser}>Load User</button>
  );
}

使用 useQuery 钩子但不立即执行查询

在某些情况下，你可能想要使用 useQuery 钩子来获取其提供的所有特性（如缓存和自动更新），但又不想立即执行查询。这可以通过结合使用 enabled 选项和条件逻辑来实现。

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

function MyComponent({ shouldFetch }) {
  const { data, error, isLoading } = useQuery(
    'todos',
    fetchTodos,
    {
      // 使用条件逻辑来决定是否立即执行查询
      enabled: shouldFetch,
    }
  );

  if (!shouldFetch) {
    // 在查询未启用时展示的内容
    return <div>条件未满足，不执行查询</div>;
  }

  // 根据查询状态渲染 UI: 数据加载中、出错或者数据显示
}

总结：

React Query 通过 enabled 选项提供了一个简单且灵活的方式来实现延迟查询。你可以根据应用的实际情况，使用条件来控制查询何时触发。这对于优化性能和提升用户体验来说是非常有用的。