禁用/暂停查询 Disabling/Pausing Queries

如果要禁用自动运行的查询，则可以使用enabled = false选项。

当 enabled 是 false时：

如果查询已缓存了数据
- 查询将以status === 'success'或isSuccess的状态进行初始化
如果查询没有缓存的数据
- 查询将以status === 'loading'和fetchStatus === 'idle'的状态进行初始化
该查询不会在挂载时自动获取数据
该查询不会自动在后台重新获取数据
该查询将忽略查询客户端的invalidateQueries和refetchQueries调用，这些调用通常会导致查询重新获取数据
从useQuery返回的refetch可用于手动触发查询以进行数据获取

TypeScript

1function Todos() {2  const { isInitialLoading, isError, data, error, refetch, isFetching } =3    useQuery({4      queryKey: ["todos"],5      queryFn: fetchTodoList,6      enabled: false,7    });8 9  return (10    <div>11      <button onClick={() => refetch()}>Fetch Todos</button>1213      {data ? (14        <>15          <ul>16            {data.map((todo) => (17              <li key={todo.id}>{todo.title}</li>18            ))}19          </ul>20        </>21      ) : isError ? (22        <span>Error: {error.message}</span>23      ) : isInitialLoading ? (24        <span>Loading...</span>25      ) : (26        <span>Not ready ...</span>27      )}28 29      <div>{isFetching ? "Fetching..." : null}</div>30    </div>31  );32}

永久性地禁用一个查询会使你失去 TanStack Query 所提供的许多优秀的功能（如后台的重新请求），而且这也不是一种自然的方式。它把你从声明性的方法（定义查询应该何时运行的依赖关系）带入了命令性的模式（每当我点击这里时就会获取）。它也不可能传递参数给refetch。很多时候，你想要的可能只是一个惰性查询：

惰性查询

enabled选项不仅可以用来永久禁用一个查询，还可以让你在稍晚的时候启用或者禁用它。一个很好的例子是一个带过滤器的表单，你只想在用户输入了一个用于过滤的关键词后才发起第一次请求：

TypeScript

1function Todos() {2  const [filter, setFilter] = React.useState("");3 4  const { data } = useQuery({5    queryKey: ["todos", filter],6    queryFn: () => fetchTodos(filter),7    // ⬇️ 只要filter为空则禁用8    enabled: !!filter,9  });10 11  return (12    <div>13      {/* 🚀 过滤的关键词设置后将启用并执行查询 */}14      <FiltersForm onApply={setFilter} />15      {data && <TodosTable data={{ data }} />}16    </div>17  );18}

isInitialLoading

惰性查询一开始就会处于status: 'loading'的状态，因为它的真实加载时机不确定且它的确暂时没有数据。由于我们目前没有获取任何数据（因为enabled已被禁用），这意味着你很有可能没法使用这个字段来显示一个“正在加载”的样式。

如果你禁用了自动运行的查询或者使用了惰性查询，你可以选择使用isInitialLoading字段。这是一个派生的标志，是由部分内容计算出来的：isLoading && isFetching

所以只有当查询正在进行第一次获取时，它才会为真。