graphql - Relay requests via setVariables -

when request made via setvariables there way take account of local state in-between async requests i.e. implement loading indicator ?

an illustration making requests https://www.graphqlhub.com/graphql

  _onchange = (ev) => {     this.setstate({       loading:true     })     let giftype = ev.target.value;     this.props.relay.setvariables({       giftype     });     this.setstate({       loading:false     })   } 

this won't track loading state , loading pass on false while async change view have lag.

if move loading setvariables there way track response ? in root container there ability track response via

  renderloading={function() {     return <div>loading...</div>;   }} 

is there similar method relay.createcontainer

is bad practice use setvariables navigate through data sets ?

full code

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               }             }             }       }     `,   }, }); 

setvariables method accepts callback 2nd argument responds events involved data fulfillment , receives 'readystate' object can inspect:

this.props.relay.setvariables({         giftype,       }, (readystate)=> {         if (!readystate.done) {           this.setstate({             loading: true           })         } else if(readystate.done) {           this.setstate({             loading: false           })         } })