如何使用Apollo Client按顺序链式调用两个GraphQL查询？

阿华AIGC实验室

2026-5-20

这个问题很典型——当你的GraphQL查询存在依赖关系时，默认的并行执行逻辑就不适用了。我来给你几个符合Apollo Client最佳实践的解决方案，适配你现有的compose写法，也有其他替代方案：

方案1：利用`skip`选项控制查询执行顺序（适配你的compose写法）

Apollo Client的graphql高阶组件支持skip选项，我们可以用它来让第二个查询只在第一个查询完成并返回有效数据后才执行。这样就能保证第二个查询的变量能拿到第一个查询的结果。

修改你的代码如下：

export default compose(
  graphql(firstQuery, {
    name: 'firstQuery'
  }),
  graphql(secondQuery, { 
    name: 'secondQuery',
    options: (ownProps) => {
      // 检查第一个查询是否完成且有有效数据
      const hasFirstData = !ownProps.firstQuery.loading && ownProps.firstQuery.data?.yourTargetField;
      return {
        // 当第一个查询未就绪时，跳过第二个查询
        skip: !hasFirstData,
        variables: {
          // 从第一个查询的结果中取需要的变量值
          var1: ownProps.firstQuery.data?.yourTargetField?.var1Value
        }
      };
    }
  })
)(withRouter(TestPage))

关键说明：

ownProps.firstQuery是第一个graphql HOC注入到组件的props，里面包含loading（是否在加载）、data（查询结果）、error（错误信息）等字段。
skip设为true时，第二个查询不会执行；当第一个查询完成后，hasFirstData变为true，skip切换为false，Apollo会自动触发第二个查询。
记得把yourTargetField和var1Value替换成你实际的字段名。

方案2：手动调用查询（更灵活的控制）

如果你需要更精细的控制（比如处理错误重试、加载状态自定义），可以用withApollo高阶组件拿到Apollo Client实例，然后在组件生命周期里手动按顺序执行查询：

import { withApollo } from 'react-apollo';

class TestPage extends React.Component {
  state = {
    firstData: null,
    secondData: null,
    loading: true,
    error: null
  };

  async componentDidMount() {
    try {
      // 第一步：执行第一个查询
      const firstResult = await this.props.client.query({ query: firstQuery });
      this.setState({ firstData: firstResult.data });

      // 第二步：用第一个查询的结果执行第二个查询
      const secondResult = await this.props.client.query({
        query: secondQuery,
        variables: {
          var1: firstResult.data.yourTargetField.var1Value
        }
      });
      this.setState({ secondData: secondResult.data, loading: false });
    } catch (err) {
      this.setState({ error: err.message, loading: false });
    }
  }

  render() {
    const { loading, error, firstData, secondData } = this.state;
    if (loading) return <div>Loading data...</div>;
    if (error) return <div>Error: {error}</div>;
    
    // 渲染你的页面内容
    return <div>...</div>;
  }
}

export default withRouter(withApollo(TestPage));

方案3：函数组件下的hooks写法（推荐现代React项目）

如果你的项目用的是函数组件，推荐用Apollo的useQuery和useLazyQuery hooks，逻辑更清晰：

import { useQuery, useLazyQuery } from '@apollo/client';
import { useEffect } from 'react';

function TestPage() {
  // 执行第一个查询
  const { loading: firstLoading, data: firstData, error: firstError } = useQuery(firstQuery);
  // 初始化第二个查询（useLazyQuery不会自动执行，需要手动触发）
  const [runSecondQuery, { loading: secondLoading, data: secondData, error: secondError }] = useLazyQuery(secondQuery);

  // 当第一个查询完成后，触发第二个查询
  useEffect(() => {
    if (firstData && !secondData) {
      runSecondQuery({
        variables: {
          var1: firstData.yourTargetField.var1Value
        }
      });
    }
  }, [firstData, runSecondQuery, secondData]);

  // 处理加载和错误状态
  if (firstLoading) return <div>Loading first data...</div>;
  if (firstError) return <div>Error loading first data: {firstError.message}</div>;
  if (secondLoading) return <div>Loading second data...</div>;
  if (secondError) return <div>Error loading second data: {secondError.message}</div>;

  // 渲染页面
  return <div>...</div>;
}

export default withRouter(TestPage);