Question

我想知道当Apollo <Query>组件完成加载时，处理父项状态的最佳方法是什么？我有一个我有时需要查询的ID。我想知道处理这种情况的最佳方法是什么？

目前我拥有子组件将监听prop更改的地方，如果我注意到我正在寻找的数据的支柱更改，我将调用一个函数来更新状态。

有没有更好的方法来处理这个而不需要子组件来监听更新？

这是我目前正在做的伪代码

import * as React from 'react';
import { Query } from 'react-apollo';

class FolderFetcher extends React.Component<Props, { id: ?string}> { 
  constructor(props) {
    super(props);
    this.state = {
      id: props.id
    }
  }

  setId = (id) => {
    this.setState({ id });
  };

  render() {
    const { id } = this.props;

    return (
      <Query skip={...} query={...}>
        ((data) => {
          <ChildComponent id={id} newId={data.id} setId={this.setId} />
        })
      </Query>
    );
  }
}

class ChildComponent extends React.Component<Props> {
  componentDidUpdate(prevProps) {
    if (prevProps.newId !== this.props.newId && 
        this.props.id !== this.props.newId) {
      this.props.setId(this.props.newId);
    }
  }
  render() {
    ...
  }
}

Answer 1

您可以将来自apollo的HoC包装出来的孩子

import { graphql } from 'react-apollo'

class ChildComponent extends React.Component {
  // inside props you have now handy `this.props.data` where you can check for `this.props.data.loading == true | false`, initially it's true, so when you will assert for false you have check if the loading was finished. 
}

export default graphql(Query)(ChildComponent)

另一种选择是手动获取客户端，并运行client.query()，这将返回承诺，您可以链接then()方法。

回调onLoad for React-Apollo 2.1

1 个答案: