React Query：如何根据数据库是否有数据禁用查询？

要实现“仅当存在用户历史表单数据时才发起查询”，关键是给enabled属性传一个能判断是否有历史数据的布尔值，具体可以按以下几种场景处理：

场景1：用本地存储标记判断 #

如果用户提交表单后，你在本地存储（localStorage/sessionStorage）存过标识（比如hasSubmittedForm），可以直接读取这个标识作为判断条件：

export function useGetData() {
  // 读取本地存储的标记，转成布尔值
  const shouldFetch = Boolean(localStorage.getItem('hasSubmittedForm'));

  return useQuery({
    queryFn: fetchFormData,
    queryKey: ['form-data'],
    enabled: shouldFetch // 只有存在标记时才触发查询
  });
}

需要注意：用户首次提交表单时，记得添加这个标记，比如：

// 表单提交成功后执行
localStorage.setItem('hasSubmittedForm', 'true');

场景2：依赖用户状态/上下文判断 #

如果你的应用里有用户登录状态，且后端返回的用户信息包含“是否有历史表单”的字段（比如user.hasPreviousForm），可以直接用这个字段：

// 假设从上下文或props获取用户信息
export function useGetData({ currentUser }) {
  return useQuery({
    queryFn: fetchFormData,
    queryKey: ['form-data'],
    enabled: currentUser?.hasPreviousForm // 根据用户数据判断
  });
}

核心逻辑说明 #

React Query的enabled属性接受布尔值：

• 当值为true时，组件挂载后自动发起查询
• 当值为false时，查询会被完全跳过，不会发起任何网络请求

你需要根据自己的业务场景，找到一个前端可提前获取的布尔条件，来代表“是否存在用户历史表单数据”，把这个条件传给enabled就能实现需求。

内容的提问来源于stack exchange，提问作者Nick Whitfield