relay-tools/react-router-relay

router callback rises only after the data has been fetched

VolodymyrTkachuk opened this issue · 1 comments

Hello,

I want to show "Loading..." message, while fetching GraphQL data from the server. For this purpose I'm using following code:

onRenderComponent({ props, routerProps, element }) {
    if (!props) {
      return <Loading {...routerProps} />;
    }
    return React.cloneElement(element, props);
  }

...

            <Route
                name="categories"
                path={RouteNames.CATEGORIES}
                component={CategoriesComponent}
                queries={ViewerQueries}
                render={this.onRenderComponent}
              />

The problem is, that onRenderComponent has been called after response with data was received (I checked this in debugger). So, the code never shows Loading.... I would expect, that the method should be called at least twice: ones after a request has been sent, and once - when the client received the response.

Did I understand the functionality in a wrong way? Or there is another place where I should look in?

taion commented

It should get called. Make sure all parent components are rendering something, though.