React子组件通过React-Apollo获取GraphQL数据如何传递给父组件

当然可行！完全不需要调整现有组件结构，你只需要通过React组件间通信的常规方式——回调函数，就能把子组件从GraphQL获取到的数据传递给父组件。下面给你具体的实现方案：

步骤1：父组件定义接收数据的回调函数 #

在父组件里创建一个方法，用来接收子组件传来的GraphQL数据，然后把这个方法作为props传给子组件：

class Parent extends Component {
  // 定义回调函数，接收子组件传递的数据
  handleContentListReceived = (contentList) => {
    // 这里可以处理数据，比如存入父组件的state
    this.setState({
      parentContentList: contentList
    });
    // 或者直接做其他业务逻辑
    console.log('子组件传来的内容列表:', contentList);
  };

  render() {
    // 把回调函数作为props传给子组件
    return <Child onContentListLoad={this.handleContentListReceived} />;
  }
}

步骤2：子组件触发回调传递数据 #

你可以选择两种时机把数据传给父组件：

方案A：通过生命周期监听数据变化（适合监听数据更新）

利用componentDidUpdate生命周期钩子，当子组件的contentList props发生变化时（也就是GraphQL数据获取完成/更新时），调用父组件的回调函数：

export class Child extends Component {
  componentDidUpdate(prevProps) {
    // 对比前后props，确保数据是新获取的才触发回调
    if (this.props.contentList !== prevProps.contentList) {
      this.props.onContentListLoad(this.props.contentList);
    }
  }

  render() {
    const { contentList } = this.props;
    // 修正你的render逻辑：map需要正确返回元素，记得加唯一key
    return (
      <div>
        {contentList?.map(elm => (
          <div key={elm._id}>{elm.title}</div>
        ))}
      </div>
    );
  }
}

export default compose(
  graphql(
    gql`
      query {
        contentList {
          _id
          title
        }
      }
    `,
    {
      // 这里假设你用了name选项，把查询结果注入为contentList props
      name: 'contentList'
    }
  )
)(Child);

方案B：通过Apollo的update回调（适合首次获取数据时触发）

在graphql HOC的配置里添加update函数，当GraphQL查询完成后直接调用父组件的回调：

export default compose(
  graphql(
    gql`
      query {
        contentList {
          _id
          title
        }
      }
    `,
    {
      name: 'contentList',
      // 当查询成功后，直接把数据传给父组件
      update: (proxy, { data: { contentList } }, props) => {
        props.onContentListLoad(contentList);
      }
    }
  )
)(Child);

补充说明 #

• 这两种方案都不需要改动你现有的组件结构，完全基于React的props回调机制实现，和react-apollo的结合非常顺畅。
• 如果你的查询可能有加载/错误状态，也可以在子组件里把这些状态一并传给父组件（比如this.props.onContentListLoad({ data: contentList, loading: this.props.loading })）。

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