Nicht gerendert, wenn Apollo-Abfrage 'Laden' ist - Reagieren

Question

Ich habe eine React-Redux-App, die Apollo-Client verwendet, um Abfragen zu meinem API GraphQL.

Ich habe einen GridContainer, der die Abfrage Anruf mit export default connect(mapStateToProps, mapDispatchToProps)(GridContainerWithData); macht, wo GridContainerWithData ist ein const, der die Abfrage mit graphql macht (gql` ...)

Dies gibt Daten in meinem Requisiten, die Folgendes enthalten: die Abfrageantwort, falls ein Fehler vorliegt und der Ladezustand (wahr oder falsch).

Im Moment verwalte ich das Laden selbst mit if(loading) {}.

Das Problem darin ist meine Komponente rendert, wenn es im Ladezustand ist und dann wieder, wenn die Abfrage fertig geladen wird. Wenn ich die if(loading) {} nicht verwende, erhalte ich eine Fehlermeldung, die besagt, dass ich etwas zurückgeben muss, wenn sich die Abfrage im Ladezustand befindet.

Gibt es eine Möglichkeit zu sagen, die Komponente nicht zu rendern, wenn die Abfrage loading ist?

Ich versuchte

shouldComponentUpdate (nextProps) { 
    if (this.props.data.loading !== nextProps.data.loading) { 
     console.log(‘i will rerender’, nextProps.data.loading); 
     return true; 
    }else { 
     return false; 
    } 
} 

aber kein Glück dort verwenden.

Gibt es eine Möglichkeit zu sagen, die Komponente nicht zu rendern, wenn die Abfrage loading ist?

EDIT:

Das ist mein GridContainer wenn es jemand helfen kann.

class ActionsToDoGridContainer extends Component { 

render() { 
    const {error} = this.props.data; 

    if (error) { 
    return (
     <div className='ComponentDistance'> 
     An unexpected error happened : 
     {error} 
     </div>); 
    } else { 
    return (
     <div className='ComponentDistance'> 
      <ActionsToDoGrid {...this.props}/> 
     ActionsToDoButtons {...this.props}/> 
     </div> 
    ); 
    } 
    } 
} 

Answer 1

edit: Das Plakat der Frage gelöst sein eigenes Problem mit diesem Code:

shouldComponentUpdate(nextProps) { 
    if (nextProps.data.loading === false) { 
    return true; 
    } else { 
    return false; 
    } 
} 

Ich glaube, Sie wurden mit shouldComponentUpdate in der richtigen Richtung zu denken, sondern wenn der Laden zu sehen, zu prüfen State ist anders, überprüfen Sie, ob Ihre Daten unterschiedlich sind.

shouldComponentUpdate (nextProps) { 
    const thisData = this.props.data.queryDataResponse; 
    const nextData = nextProps.data.queryDataResponse; 
    if (!someLibrary.deepEquals(thisData, nextData)) { 
     return true; 
    }else { 
     return false; 
    } 
} 

Wenn sich die Daten ändern, wird die Funktion true zurückgegeben und aktualisiert. Sie können in einigen Rand Fällen laufen, also vergessen Sie nicht über diese Funktion, wenn die Dinge zu brechen scheinen