确定 Relay 何时获取查询数据

Question

我在我的网络应用程序中使用 Reactjs 和 Relayjs。其中一个页面，我称之为 memberList，正在显示网站上所有注册用户的列表。

这是我实现的简化版本：

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

这很好用；它按预期显示了教室的所有成员。但是，该页面的行为并不像我希望的那样：

导航到页面或刷新时，<span> 会短暂呈现，因为 this.props.memberList.edges 数组为空。
不到一秒后，props更新，数组不再为空。这会导致重新呈现，并且 <ul> 成员列表现在显示为 - 正如预期的那样。

我想知道 Relay 何时获取数据，以便我可以确定 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 属性。

确定 Relay 何时获取查询数据

Determining when Relay is fetching query data

reactjs

graphql

relayjs