setVariablesを介したリレーリクエスト

Question

setVariablesを介してリクエストが行われた場合、非同期要求の間のローカル状態、つまりロードインジケータを実装する方法がありますか？ 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 
    }) 
    } 

これに

イラストメイキング要求は負荷状態を追跡しませんし、ビューへの非同期の変更が遅れを持つことになりますしながら、ロードはすぐに偽に渡すだろう。

ロードを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

setVariables方法は、データの履行に関わるイベントに応答して、それはあなたが調べることができます'readyState'オブジェクト受け第二引数としてコールバックを受け入れる：

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

Answer 2

グレート質問です。あなたが持っているものは、特定のコンポーネントの画面の読み込みを扱うという点で実行可能なオプションです。しかし、個々のコンポーネントごとにロードシナリオごとに実装するのは負担になります。

より汎用的なソリューションを提供する場合、代わりにできることは次のとおりです。Reactアプリケーションでグローバルな状態を各コンポーネントにブロードキャストする、グローバルイベントシステムを設定することができます。また、必要な各コンポーネントについては、このグローバルイベントをcomponentDidMount()から購読し、componentWillUnmount()から購読を解除することができます。コンポーネントがこのグローバル状態の変更を認識すると、そのコンポーネントはsetState()を呼び出す必要があります。このコンポーネントは、そのコンポーネントに読み込みシーンを表示するかどうかを決定します。

これは、グローバルイベントシステムを設定するコンポーネント間の通信方法を学ぶための優れたリソースです： https://facebook.github.io/react/tips/communicate-between-components.html

あなたはまた、同様にこれを実装するためにFacebookのフラックスを使用することができます。 https://facebook.github.io/flux/

・ホープ、この助けて！