this.props.relay.setVariables 触发获取后加载指示器？答案

【问题标题】：Loading indicator after this.props.relay.setVariables triggered fetch?this.props.relay.setVariables 触发获取后加载指示器？
【发布时间】：2016-05-30 01:12:51
【问题描述】：

我使用react-router-relay，并且在我的一条路线中，我有一个下拉菜单。

现在我从该下拉列表中选择一个不同的值 - 这将调用 this.props.relay.setVariables，它将根据此变量获取一些数据。此数据将显示在当前路线内的图表组件中。

如何提供回调或其他信息来知道当前组件现在正在获取数据/现在已完成获取数据？

我需要它才能在图表组件顶部显示加载指示器。

我认为我不能为此使用react-router-relay，因为它只能让我显示加载指示器而不是我当前的路线 - 但我想在当前路线中显示加载指示器。

请帮忙。

【问题讨论】：

标签： reactjs relayjs graphql-js

【解决方案1】：

setVariables 方法采用第二个参数，onReadyStateChange 回调，可用于检测请求何时挂起以及何时完成或失败。

另见setVariables docs 和guide to ready states - 基本上readyState 是{aborted, ready, done, error, ...} 的对象，您可以使用它来适当地更新用户界面：

  this.props.relay.setVariables({...}, readyState => {
    if (readyState.done || readyState.aborted) {
      this.setState({loading: false});
    } else if (readyState.error) {
      this.setState({loading: false, error});
    }
  });

【讨论】：

非常感谢 - 正是我想要的。