Ermitteln, wann Relay Abfragedaten abruft

Question

Ich verwende Reactjs und Relayjs in meiner Webanwendung. Eine der Seiten, ich nenne sie memberList, zeigt eine Liste aller auf der Website registrierten Benutzer an.

Dies ist eine vereinfachte Version meiner Implementierung:

render() { 
    {this.props.memberList.edges.length > 0 ? 
    <ol> 
     {this.props.memberList.edges.map(
     (member, i) => { 
      return <li>{member.node.username}</li>; 
     } 
    )} 
    </ol> 
    : <span>No members to show!</span>} 
} 

Und mein RelayContainer:

export default Relay.createContainer(MemberList, { 
    fragments: { 
    classroom:() => Relay.QL` 
     fragment on Classroom { 
     id, 
     memberList(first: 100) { 
      edges { 
      node { 
       id, 
       username 
      } 
      } 
     }, 
     } 
    `, 
    }, 
}); 

Dieses funktioniert gut; Es zeigt alle Mitglieder des Klassenzimmers wie erwartet an. Allerdings ist die Seite nicht ganz so verhalten, als Ich mag würde es:

• Wenn Sie auf die Seite navigieren oder wenn erfrischend, die <span> für einen kurzen Moment gemacht wird, weil die this.props.memberList.edges Array leer ist.
• Weniger als eine Sekunde später, das props Update und das Array ist nicht mehr leer. Dies führt zu einem erneuten Rendern und die <ul> Liste mit den Mitgliedern wird nun angezeigt - wie erwartet.

Ich möchte wissen, wenn Relais ist Abrufen von Daten, so kann ich feststellen, ob der memberList ist tatsächlich leer ist oder wenn seine Eigenschaften kann noch nicht bestimmt werden, da eine Abfrageantwort ansteht.

Wie kann dies erreicht werden? Ich habe über 2 Stunden gesucht und kann nur relevante Antworten auf Mutationen finden, was ich hier nicht mache. Vielen Dank.

Answer 1

Ich bin überrascht, dass Ihre Komponente kurz die span rendern wird. Standardmäßig sollte die Komponente nicht einmal gerendert werden, wenn Relay nicht mit dem Abrufen von Daten fertig ist.

Wie auch immer, wenn Sie herausfinden, was dort los ist, Relay.Renderer hat eine render prop, die Sie verwenden können, um zu erreichen, was Sie wollen. Hier ist ein Beispiel (direkt aus der Dokumentation entnommen).

In diesem Beispiel zeigen ErrorComponent und LoadingComponent einfach eine statische Fehlermeldung/Ladeanzeige an.

<Relay.Renderer 
    Container={ProfilePicture} 
    queryConfig={profileRoute} 
    environment={Relay.Store} 
    render={({done, error, props, retry, stale}) => { 
    if (error) { 
     return <ErrorComponent />; 
    } else if (props) { 
     return <ProfilePicture {...props} />; 
    } else { 
     return <LoadingComponent />; 
    } 
    }} 
/> 

Wenn Sie Relay.RootContainer verwenden, hat es einige eine ähnliche renderLoading prop.