Determining when Relay is fetching query data

Question

I'm using Reactjs and Relayjs in my web application. One of the pages, I call it memberList, is displaying a list of all users registered on the website.

This is a simplified version of my implementation:

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

And my RelayContainer:

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

This works fine; it displays all the members of the classroom as expected. However, the page doesn't behave quite as I'd like it to:

When navigating to the page, or when refreshing, the <span> is rendered for a brief moment, because the this.props.memberList.edges array is empty.
Less than one second later, the props update and the array is no longer empty. This causes a re-render and the <ul> list with the members is now displayed instead - as expected.

I want to know when Relay is fetching data so I can determine if the memberList is actually empty or if its' properties cannot yet be determined because a query response is pending.

How can this be accomplished? I've searched for over 2 hours and I can only find relevant answers to mutations, which is not what I'm doing here. Thanks.

dmnd · Accepted Answer · 2016-07-31 19:10:26Z

2

+150

I'm surprised that your component is briefly rendering the span. By default the component shouldn't even be rendered if Relay hasn't finished fetching data.

Anyway, if you figure out what is going on there, Relay.Renderer has a render prop that you can use to achieve what you want. Here's an example (taken directly from the docs).

In this example, ErrorComponent and LoadingComponent simply display a static error message / loading indicator.

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

If you're using Relay.RootContainer, it has some a similar renderLoading prop.

answered Jul 31, 2016 at 19:10

dmnd

2,5112 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Determining when Relay is fetching query data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related