Apollo Client React 如何将首个GraphQL查询结果作为另一个查询的入参

Apollo Client 完全支持这种有依赖关系的串行查询需求，以下是两种常用的实现方式：

方案1：useQuery + useLazyQuery 组合（灵活性最高） #

先执行第一个查询获取手机号，拿到返回值后手动触发第二个查询：

import { useQuery, useLazyQuery, useEffect } from '@apollo/client';
import { GET_DETAIL, GET_DETAIL_BY_PHONE } from './gql';

const UserDetail = ({ userId }) => {
  // 第一个查询：获取用户基础信息（含手机号）
  const { 
    data: baseData, 
    loading: baseLoading, 
    error: baseError 
  } = useQuery(GET_DETAIL, {
    variables: { id: userId }
  });

  // 第二个懒查询：仅在需要时触发
  const [triggerPhoneQuery, {
    data: companyData,
    loading: companyLoading,
    error: companyError
  }] = useLazyQuery(GET_DETAIL_BY_PHONE);

  // 监听第一个查询的返回结果，拿到手机号后触发第二个查询
  useEffect(() => {
    const phone = baseData?.data?.phone;
    if (phone) {
      triggerPhoneQuery({ variables: { phone } });
    }
  }, [baseData, triggerPhoneQuery]);

  // 加载、错误状态处理
  if (baseLoading || companyLoading) return <div>加载中</div>;
  if (baseError || companyError) return <div>查询失败</div>;

  return (
    <div>
      <p>手机号：{baseData.data.phone}</p>
      <p>关联企业：{companyData?.data?.map(item => item.name).join('、')}</p>
    </div>
  )
}

方案2：skip 参数控制串行（代码更简洁） #

两个查询都用普通useQuery，通过skip参数控制第二个查询的执行时机，无手机号时自动跳过查询：

import { useQuery } from '@apollo/client';
import { GET_DETAIL, GET_DETAIL_BY_PHONE } from './gql';

const UserDetail = ({ userId }) => {
  // 第一个查询
  const { 
    data: baseData, 
    loading: baseLoading, 
    error: baseError 
  } = useQuery(GET_DETAIL, {
    variables: { id: userId }
  });
  const phone = baseData?.data?.phone;

  // 第二个查询：无手机号时跳过执行
  const {
    data: companyData,
    loading: companyLoading,
    error: companyError
  } = useQuery(GET_DETAIL_BY_PHONE, {
    variables: { phone: phone || '' },
    skip: !phone // 核心配置：phone不存在时不执行查询
  });

  // 后续加载、渲染逻辑和方案1完全一致
}

注意事项 #

• 两种方案都可以分别控制两个查询的加载、错误状态，也可以合并为统一状态处理
• 如果需要合并两个查询的返回结果，可以在两个查询都完成后用useMemo生成合并后的对象使用

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