Relayがクエリデータを取得するタイミングを決定する

Question

WebアプリケーションでReactjsとRelayjsを使用しています。私はそれをmemberListと呼ぶページの1つに、ウェブサイトに登録されているすべてのユーザーのリストを表示しています。

これは私の実装の簡易版である：

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>} 
} 

そして、私のRelayContainer：

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

これは正常に動作します。それは期待どおりに教室のすべてのメンバーを表示します。 this.props.memberList.edges配列が空であるため、

• のページへの移動、またはさわやか、<span>は一瞬のためにレンダリングされています。私はそれが好きなただし、ページはかなり動作しません。
• 1秒未満で、propsが更新され、配列は空ではなくなりました。これにより、再レンダリングが行われ、代わりにメンバーとのリストが表示されるようになりました。

私はmemberListが実際空またはクエリ応答が保留中であるため、そのプロパティがまだ決定できない場合であれば、私が判断することができるようにリレーがデータをフェッチしている際に知ってほしいです。

これはどのように達成できますか？私は2時間以上を探しましたが、私はここでやっていることではない突然変異に関連する答えを見つけることができます。ありがとう。

Answer 1

あなたのコンポーネントが簡単にspanをレンダリングしているのに驚いています。 Relayがデータの取得を完了していない場合、デフォルトでコンポーネントはレンダリングされません。

とにかく、何が起こっているのかわかると、Relay.Rendererにはrender propがあり、あなたが望むものを達成するために使うことができます。以下はその例です（ドキュメントから直接取ったものです）。

この例では、ErrorComponentとLoadingComponentは、単に静的エラーメッセージ/ローディングインジケータを表示します。

<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 />; 
    } 
    }} 
/> 

あなたがRelay.RootContainerを使用している場合、それはいくつかの類似したrenderLoading小道具を持っています。