在阿波罗查询后发送道具答案

【问题标题】：send prop after apollo query在阿波罗查询后发送道具
【发布时间】：2018-05-15 10:26:52
【问题描述】：

在 apollo-client 更新后，我无法向父组件发送道具。我要做的是

  <Query query={GET_DOG_PHOTO} variables={{ breed }}>
   {({ loading, error, data }) => {
  if (loading) return null;
  if (error) return `Error!: ${error}`;

  return (
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
  );
}}

查询完成后我需要发送一个函数

有什么想法吗？

【问题讨论】：

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

这里是 react-apollo 中的一个 github 问题，要求能够将回调传递给查询：https://github.com/apollographql/react-apollo/issues/208

问题中提出的解决方法基本上是使用 componentWillReceiveProps（您现在可能会使用 componentDidUpdate，如果您只是想设置状态，则可能是 getDerivedStateFromProps）。有点烦人，因为您必须将 Query 加载值作为道具传递，这样您才能进入生命周期。所以像这样的

<Query query={GET_DOG_PHOTO} variables={{ breed }}>
  {({ loading, error, data }) => (
    <LifecycleComp loading={loading} error={error} data={data} />
  )}
</Query>

class LifecycleComp extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.loading && !this.props.loading) {
      // perform callback
    }
  }

  render() {
    if (loading) return null;
    if (error) return `Error!: ${error}`;

    return (
      <img ... /> 
    )
  }
}

【讨论】：