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

당신은 또한뿐만 아니라이를 구현하기 위해 페이스 북의 플럭스를 사용할 수 있습니다

: https://facebook.github.io/flux/

희망이 도와 줘요!