Relay-Anfragen über setVariables

Question

Wenn eine Anfrage über setVariables gestellt wird gibt es eine Möglichkeit, den lokalen Zustand zwischen asynchronen Anfragen zu berücksichtigen, d. H. Den Lade-Indikator zu implementieren?

eine Darstellung Herstellung Anfragen an 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 
    }) 
    } 

dies den Ladezustand nicht verfolgen und Laden wird sofort auf false weitergeben, während die Asynchron die Ansicht ändert Verzögerung hat.

Wenn wir das Laden in setVariables verschieben, gibt es eine Möglichkeit, die Antwort zu verfolgen? im Wurzelbehälter gibt es die Möglichkeit, über Reaktion

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

gibt es eine ähnliche Methode zu verfolgen setVariables für Relay.createContainer

ist es schlecht Praxis zu verwenden, um durch Datensätzen zu navigieren?

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

Answer 1

setVariables Methode auch einen Rückruf als 2. Argument akzeptiert, die mit der Daten Erfüllung beteiligt auf die Ereignisse reagiert und es erhält eine 'readyState' Objekt, das Sie überprüfen können:

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

Answer 2

Große Frage. Was Sie haben, ist eine praktikable Option in Bezug auf den Umgang mit Ladebildschirmen für eine bestimmte Komponente. Aber das kann für jedes Belastungsszenario für jede einzelne Komponente zu einer Belastung werden.

Wenn Sie eine allgemeinere Lösung bereitstellen möchten, können Sie stattdessen Folgendes tun: Sie können in Ihrer React-App ein globales Ereignissystem einrichten, das einen globalen Status an jede Komponente sendet, abhängig davon, ob ein Anruf getätigt wird oder nicht. Und für jede Komponente, für die Sie diese benötigen, können Sie dieses globale Ereignis von componentDidMount() abonnieren und mit componentWillUnmount() abbestellen. Sobald Ihre Komponente eine Änderung in diesem globalen Status sieht, sollte diese Komponente setState() aufrufen, die bestimmt, ob diese Komponente eine Ladeszene anzeigen soll oder nicht.

Dies ist eine gute Ressource zu lernen, wie man zwischen den Komponenten zu kommunizieren, um ein globales Ereignis System einzurichten: https://facebook.github.io/react/tips/communicate-between-components.html

Sie können auch als auch Facebook-Flux verwenden, um dies zu implementieren: https://facebook.github.io/flux/

Hope Diese hilft!