通过 setVariables 中继请求

Question

当通过 setVariables 发出请求时，有没有办法考虑异步请求之间的本地状态，即实现加载指示器？

提出请求的插图

  _onChange = (ev) => {
    this.setState({
      loading:true
    })
    let gifType = ev.target.value;
    this.props.relay.setVariables({
      gifType
    });
    this.setState({
      loading:false
    })
  }

这不会跟踪加载状态，并且加载会立即传递到 false，而对视图的异步更改会有滞后。

如果我们将加载移动到 setVariables 中，是否有任何方法可以跟踪响应？在根容器中，可以通过

跟踪响应

  renderLoading={function() {
    return <div>Loading...</div>;
  }}

Relay.createContainer有没有类似的方法

使用 setVariables 浏览数据集是不好的做法吗？

完整代码

class GiphItems extends React.Component {
  constructor(){
    super();
    this.state = {
      loading: false
    }
  }
  render() {
    const random = this.props.store.random
    return <div>
      <select onChange={this._onChange.bind(this)} value={this.props.relay.variables.gifType}>
        <option value="sexy">Sexy</option>
        <option value="cats">Cats</option>
        <option value="goal">Goal</option>
        <option value="lol">LOL</option>
      </select>
      {this.state.loading ? 'LOADING' : <a href={random.url}><img src={random.images.original.url} className="img-responsive"/></a>}
    </div>;
  }

  _onChange = (ev) => {
    this.setState({
      loading:true
    })
    let gifType = ev.target.value;
    this.props.relay.setVariables({
      gifType
    });
    this.setState({
      loading:false
    })
  }
}
GiphItems = Relay.createContainer(GiphItems, {
  initialVariables: {
    gifType: "sexy"
  },
  fragments: {
    store: () => Relay.QL`
      fragment on GiphyAPI {
        random(tag: $gifType ) {
            id
            url
            images {
              original {
                url
              }
            }
            }
      }
    `,
  },
});

Answer 1

好问题。在处理特定组件的加载屏幕方面，您拥有的是一个可行的选择。但是，对于每个单独组件的每个加载场景，这可能会成为一个负担。

如果要提供更通用的解决方案，您可以改为执行以下操作：您可以在 React 应用程序中设置一个全局事件系统，该系统将根据是否正在进行调用向每个组件广播全局状态.对于您需要此功能的每个组件，您可以从 componentDidMount() 订阅此全局事件并使用 componentWillUnmount() 取消订阅。一旦您的组件看到此全局状态发生变化，该组件应调用 setState()，这将决定该组件是否应显示加载场景。

这是学习如何在组件之间进行通信以设置全局事件系统的好资源： https://facebook.github.io/react/tips/communicate-between-components.html

您也可以使用 Facebook 的 Flux 来实现： https://facebook.github.io/flux/

希望对您有所帮助！

Answer 2

setVariables method also accepts a callback as the 2nd argument which responds to the events involved with the data fulfillment and it receives a 'readyState' 您可以检查的对象：

this.props.relay.setVariables({
        gifType,
      }, (readyState)=> {
        if (!readyState.done) {
          this.setState({
            loading: true
          })
        } else if(readyState.done) {
          this.setState({
            loading: false
          })
        }
})

通过 setVariables 中继请求

Relay requests via setVariables

graphql

relayjs

relay

graphql-js