React Query 如何有条件的调用 useQuery ?

React Query 的 useQuery 钩子是一个很强大的工具，它允许您获取、缓存和更新来自于异步资源（如 API）的数据。有时候，我们希望在满足特定条件时才调用 useQuery，以避免不必要的网络请求或者确保所有必要的依赖项都已经就绪。

要有条件地调用 useQuery，您可以使用 enabled 选项。这个选项接受一个布尔值，当它为 false 时，useQuery 不会自动运行。您可以基于任何逻辑来设置这个布尔值，例如检查一个变量是否存在，或者一个状态是否为特定值。

以下是一个使用 enabled 选项的例子：

假设我们有一个用户界面，其中只有在用户选择了一个特定的项目后才应该去加载项目的详情。我们可以将用户选择的项目 ID 存储在一个状态变量中，并使用这个变量的状态来动态控制 useQuery 的 enabled 选项。

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

const fetchProjectDetails = async (projectId) => {
  const response = await fetch(`/api/projects/${projectId}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function MyComponent() {
  const [selectedProjectId, setSelectedProjectId] = useState(null);

  const { data, error, isLoading } = useQuery(
    ['projectDetails', selectedProjectId],
    () => fetchProjectDetails(selectedProjectId),
    {
      // 只有当 selectedProjectId 不为 null 时，useQuery 才会运行
      enabled: !!selectedProjectId,
    }
  );

  // ... UI 逻辑和渲染等 ...

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;

  return (
    // 渲染项目详情或一个选择项目的界面
  );
}

在这个例子中，只有当 selectedProjectId 有一个有效值时，useQuery 才会去加载项目的详情。初始时 selectedProjectId 为 null，所以 useQuery 是不会进行数据加载的，直到用户选择了一个项目，selectedProjectId 被设置为一个非空值。

这种方法可以有效地确保您的组件按照预期的方式进行数据获取，而不会在没有必要时发起网络请求，这可以提升应用的性能并避免可能的错误。