render props in Route component is never called when data is fetching

[alengel]

I've implemented the Router with react-router-relay according to the README. I've debugged it with help from @devknoll and found that the render props is never triggered when relay is fetching data.

I've implemented my code like this:

import babelPolyfill from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import Loader from 'react-loader';

import Relay from 'react-relay';
import useRelay from 'react-router-relay';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';

import AppQueries from './queries/AppQueries';
import SomeQueries from './queries/SomeQueries';

import App from './components/app';
import SomeComponent from './components/some-component';

import './relay';

ReactDOM.render((
  <Router
    history={browserHistory}
    render={applyRouterMiddleware(useRelay)}
    environment={Relay.Store}>

    <Route
      path="/academy"
      component={App}
      queries={AppQueries}>

      <IndexRoute
        component={SomeComponent}
        queries={DashboardQueries}
        render={({ props }) => props ? <SomeComponent {...props} /> : <Loader />} />

    </Route>

  </Router>
), document.getElementById('app-body'));

My current package.json looks like this:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "babel-polyfill": "^6.9.1",
    "babel-runtime": "^6.9.2",
    "graphiql": "0.6.6",
    "graphql": "^0.4.18",
    "react": "^15.2.1",
    "react-addons-shallow-compare": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-loader": "^2.0.0",
    "react-relay": "^0.9.2",
    "react-router": "^2.6.0",
    "react-router-relay": "^0.13.3",
    "style-loader": "^0.13.1",
    "superagent": "^1.2.0",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel-core": "^6.11.4",
    "babel-eslint": "^6.1.2",
    "babel-jest": "^13.2.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.11.0",
    "babel-relay-plugin": "^0.9.2",
    "jest-cli": "^12.1.1",
    "react-addons-test-utils": "^15.2.1",
    "webpack": "^1.13.1"
  },
  "scripts": {
    "test": "node node_modules/.bin/jest --verbose --runInBand",
    "build": "node node_modules/.bin/webpack",
    "postinstall": "npm run build"
  },
  "jest": {
    "rootDir": "",
    "scriptPreprocessor": "node_modules/babel-jest",
    "preprocessorIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/src/__tests__/fixtures"
    ],
    "testPathDirs": [
      "<rootDir>/src/"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/babel-runtime/",
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/react-relay/",
      "<rootDir>/node_modules/react-router/",
      "<rootDir>/node_modules/react-router-relay/",
      "<rootDir>/src/__tests__/",
      "<rootDir>/src/components/delay/",
      "<rootDir>/src/mutations/",
      "<rootDir>/src/components/react-wrapper"
    ]
  }
}

This is following the example on the README but since I update react-router-relay from 0.7.0 to 0.13.3, the render props doesn't render the Loader component anymore when data is fetching. react-loader is also the latest version and I can render it fine inside any other component, so there seems to be a problem with render props.

I think this might be a bug but if I missed something on the implementation, I'd be happy to be proven wrong 😉

[taion]

You'd need to set up the render hook in the parent route as well. Since it's using the default render implementation, it will show nothing while it is loading.

[alengel]

Hi @taion - Thanks so much! That really was the missing piece of the puzzle! Can't believe, I didn't see this before. Thanks so much for helping though, I meant it when I said I'd be happy to be proven wrong 😄