CODEWITHSUNDEEP
reactjsgraphqlrelayjs
Chris
Chris

Reputation: 59491

Determining when Relay is fetching query data

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:

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.

Upvotes: 1

Views: 649

Answers (1)

dmnd
dmnd

Reputation: 2476

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.

Upvotes: 2

Related Questions