React Query：参数为空时如何跳过查询并让data返回null？

React Query 的 useQuery 自带 enabled 配置项，可直接控制查询是否执行，完全不需要用 useEffect 绕弯。结合初始数据设置，就能实现你要的「空参数时跳过请求、tableData 返回 null」的需求。

修改自定义查询 Hook #

// 建议把axios实例抽离到外部，避免每次调用hook都重复创建
const axiosClient = axios.create()

const useFetchApTableQuery = (date: string): UseQueryResult => {
  const fetchApTableQuery = async (): Promise<any[]> => {
    const res = await axiosClient.get(`${API_ROUTES.apTable}?date=${date}`)
    return res.data.data.map((record: any) => APParser(record))
  }

  const queryResult = useQuery([date], fetchApTableQuery, {
    // 仅当date不为空时才触发查询
    enabled: date !== '',
    // 设置初始数据为null，替代默认的undefined
    initialData: null,
  })

  // 确保未执行查询时data始终返回null
  return {
    ...queryResult,
    data: queryResult.data ?? null,
  }
}

组件中调用无需修改 #

const APTablePage = (): JSX.Element => {
  const [selectedPeriod, setSelectedPeriod] = useState<string>('')
  const { data: tableData } = useFetchApTableQuery(selectedPeriod)

  // 此时tableData在selectedPeriod为空时保持null，有有效值时自动触发请求
  ....
}

关键细节说明 #

• enabled: date !== ''：当传入的日期为空字符串时，useQuery 会直接跳过 API 请求，不会发起无效调用。
• initialData: null：强制查询初始状态下的 data 为 null，避免默认的 undefined 导致后续逻辑报错。
• 抽离 axiosClient 到 Hook 外部：避免每次调用 Hook 都创建新的 axios 实例，减少不必要的资源开销。

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