在this.props.relay.setVariables触发fetch之后加载指标？

Question

I use react-router-relay and within one of my routes I have a dropdown.

Now I select a different value from that dropdown - that will call this.props.relay.setVariables which will fetch some data based on this variables. This data will be displayed in a chart component within the current route.

How can I provide a callback or something to know that the current component is fetching data now / finished fetching data now ?

I need this to be able to show a loading indicator on top of the chart component.

I think I can't use react-router-relay for this since it would only enable me to show a loading indicator instead of my current route - but I want to show the loading indicator within the current route.

Please help.

Answer 1

The setVariables method takes a second argument, an onReadyStateChange callback, that can be used to detect when a request is pending and when it has completed or failed.

See also the setVariables docs and the guide to ready states - basically the readyState is an object of {aborted, ready, done, error, ...} which you can use to update the UI appropriately:

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