React中如何借助react-query将首个API结果用于第二个API调用

可以实现，这是React Query内置支持的「依赖查询」场景，无需额外编写副作用监听逻辑，仅通过enabled配置项即可实现。

实现逻辑 #

核心是通过配置项控制第二个接口的请求时机：只有第一个接口请求成功并拿到有效medical_record_id后，才触发第二个接口的请求。

代码示例 #

假设你已完成基础封装：

• 接口方法GetDogMedicalRecord入参为medical_record_id
• 已封装自定义Hook useFindDogInfo(dogId)内部调用FindDogInfo接口

组件内调用示例：

import { useQuery } from '@tanstack/react-query'
import { useFindDogInfo, GetDogMedicalRecord } from './your-api-path'

function DogMedicalRecord({ dogId }) {
  // 第一个查询：获取dog关联的病历ID
  const { 
    data: dogInfo, 
    isLoading: isDogInfoLoading, 
    isError: isDogInfoError 
  } = useFindDogInfo(dogId)
  const medicalRecordId = dogInfo?.medical_record_id

  // 第二个查询：依赖第一个接口的返回值，只有拿到有效ID才发起请求
  const { 
    data: medicalRecord, 
    isLoading: isMedicalRecordLoading, 
    isError: isMedicalRecordError 
  } = useQuery(
    // 缓存key必须包含medicalRecordId，保证参数变化时自动更新
    ['dogMedicalRecord', medicalRecordId],
    () => GetDogMedicalRecord(medicalRecordId),
    // 核心配置：只有medicalRecordId存在时，才启用当前查询
    { enabled: !!medicalRecordId }
  )

  // 业务状态处理示例
  if (isDogInfoLoading) return <div>加载狗狗基础信息中</div>
  if (isDogInfoError) return <div>狗狗信息加载失败</div>
  if (isMedicalRecordLoading) return <div>加载狗狗病历中</div>
  if (isMedicalRecordError) return <div>病历加载失败</div>

  return <div>/* 渲染病历信息 */</div>
}

注意事项 #

• 如果你需要将第二个查询也封装为自定义Hook，直接将enabled作为参数透传到内部的useQuery即可，无需修改原有封装逻辑
• React Query会自动处理请求时序，完全避免手动写useEffect监听触发请求导致的竞态问题
• 两个查询的缓存独立生效，只要参数不变，后续访问会直接复用缓存，无需重复发起请求

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