Apollo Query 组件返回结果后调度 redux action答案

【问题标题】：Dispatch redux action after Apollo Query component returns resultApollo Query 组件返回结果后调度 redux action
【发布时间】：2018-09-19 21:10:07
【问题描述】：

使用旧方法：

graphql(GET_PROJECTS_BY_USER_ID, {
    options: ownProps => ({
        skip: !ownProps.loggedUser.id,
    }),
    props: ({ data }) => {
        return data;
    },
});

我可以捕获 componentWillReceiveProps 生命周期内的项目列表并在那里调度 redux 操作：

componentWillReceiveProps(nextProps) {
    if (!nextProps.loading && this.props.loading) {
        this.props.setProjects(nextProps.getProjects);
    }
}

现在我正在尝试 Apollo 的 <Query/> 组件，但我不知道如何正确调度操作：

render() {
    return (
        <Query
            query={GET_PROJECTS_BY_USER_ID}
            skip={!this.props.loggedUserId}
        >
            {({ loading, data: { getProjects: projects } }) => {
                if (loading) return 'Loading ...';

                this.props.setProjects(projects); // no good

                // return projects
            }}
        </Query>
    );
}

这将导致以下警告：

在现有状态转换期间无法更新（例如在render 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount。

问题是使用<Query>,componentWillMount` 将不再被调用。

【问题讨论】：

标签： reactjs redux apollo react-apollo

【解决方案1】：

新的Query 组件使用render props 模式。作为组件的子组件传入的函数在Query 的render 方法中被调用，这意味着您无权访问函数内该组件 的任何其他生命周期方法。为了解决这个问题，您必须创建一个额外的组件来实现您需要的生命周期方法。只有一种方法：

class DoSomethingOnce extends Component {
  componentWillMount () {
    this.props.action()
  }
  render () {
    return this.props.children || null
  }
}

<Query
  query={GET_PROJECTS_BY_USER_ID}
  skip={!this.props.loggedUserId}
>
  {({ loading, data: { getProjects: projects } }) => {
    if (loading) return 'Loading ...';
    <DoSomethingOnce action={() => setProjects(projects)}>
      // whatever else you're going to render
    </DoSomethingOnce>
  }}
</Query>

或者，您的带有componentDidMount 的组件可以只完成所有渲染，而不是将责任转嫁给它的孩子。您也可以随时使用 reactions/component 之类的库。

这与您使用graphql HOC 时确实没有什么不同——您仍然必须将该 HOC 包装在实现 componentDidMount 的组件周围。

【讨论】：

谢谢！我想我会坚持使用 graphql HOC。