Wie setState() in React/Apollo mit graphQL

Question

Ich versuche SetState() zu einem Abfrageergebnis habe ich von GraphQL, aber ich habe Schwierigkeiten herauszufinden, wie dies zu tun, weil es immer geladen wird, oder es ist nur von Requisiten benutzt. ich zuerst den Zustand

constructor (props) { 
     super(props); 
     this.state = { data: [] }; 

Dann habe ich diese Abfrage

const AllParams = gql` 
    query AllParamsQuery { 
     params { 
      id, 
      param, 
      input 
     } 
    }` 

Und wenn es darum geht zurück kann ich darauf zugreifen mit this.props.AllParamsQuery.params

Wie und wann sollte ichthis.setState({ data: this.props.AllParamsQuery.params })ohne es zurück{data: undefined}?

Ich habe nicht einen Weg, um es zu warten, während es undefined AKA loading: true dann setState gefunden. Ich habe versucht componentDidMount() und componentWillReceiveProps() einschließlich einer async function(){...await...} aber war nicht erfolgreich, ich mache es wahrscheinlich falsch. Kann jemand das richtig machen oder ein Beispiel haben?

EDIT + Antwort: Sie sollten nicht setzen und lassen Sie es in Requisiten. Überprüfen Sie diesen Link aus: „Warum Requisiten Einstellung als Staat in react.js ist Gotteslästerung“ http://johnnyji.me/react/2015/06/26/why-setting-props-as-state-in-react-is-blasphemy.html Es gibt mehr zu dem Problem Requisiten zu aktualisieren, aber einige große Beispiele können an dieser App Schaffung Tutorial zu finden: https://www.howtographql.com/react-apollo/8-subscriptions/

Answer 1

Sie müssen componentWillReceiveProps() finden Sie unter Beispiel:

componentWillReceiveProps(newProps){ 
     if(!newProps.query.loading){ 
      this.setState({data: newProps.query.data}) 
     } 
    } 

Answer 2

Was ist der Grund hinter dem Setzen auf Staat? Beachten Sie, dass Apollo Client einen internen Redux-Speicher verwendet, um Abfragen zu verwalten. Wenn Sie versuchen, eine erneute Wiedergabe basierend darauf auszulösen, wenn sich in der Abfrage etwas ändert, sollten Sie refetchQueries() verwenden. Wenn Sie es unbedingt im lokalen Zustand speichern müssen, würde ich annehmen, dass Sie möglicherweise nextProps in componentWillReceiveProps vergleichen können, um festzustellen, wann das Laden (der Wert, der beim Ausführen einer Abfrage vom apollo-Client zurückkommt) geändert wurde, und aktualisieren Sie dann Ihren Status.

Answer 3

Ich hatte ein ähnliches Problem (obwohl es aus einem ganz anderen Grund geschah). Mein Zustand wurde immer auf undefiniert gesetzt. Ich konnte es mit einer React Middleware lösen. Es hat es leicht gemacht, dieses Problem zu vermeiden. Am Ende habe ich Superagenten benutzt.

http://www.sohamkamani.com/blog/2016/06/05/redux-apis/