React-router: Fetch data server side (React Router V4)

[loick]

Hi there,

I was wondering if there is a documentation/recommendation I didn't find about the way to fetch the data of my component (and its subcomponents) following the route. I don't really know where to get the same kind of behavior than in the V3 with the renderProps.components.

Note that I'm not using a global external configuration for the routing, I create the routes directly in my components, but maybe in order to do that I shouldn't?

Thanks!

[jaredpalmer]

This is one approach: https://gist.github.com/ryanflorence/efbe562332d4f1cc9331202669763741. You can write an HOC that calls a child's fetchData, componentDidMount, and passes down props to stay DRY.

[mjackson]

Thanks for the response, @jaredpalmer :)

Since there are a million possible answers to this question, I'm going to close. But please feel free to keep discussing if you'd like.

[timdorr]

I'd follow the discussion in #4407, which is directly related to this (it's a superset of this specific use case)

[loick]

Thanks guys for the quick answer :)
Okay so I might have to use an external routing configuration for now, and it may be for the best. I'm gonna try this way!

[dKab]

@jaredpalmer in your gist https://gist.github.com/ryanflorence/efbe562332d4f1cc9331202669763741#file-data-js-L36
where is match coming from? Why do you expect to have it in this.props? And what is it?

[timdorr]

@dKab It's the matched route: https://gist.github.com/ryanflorence/efbe562332d4f1cc9331202669763741#file-data-js-L64 (It does the same thing on the client side in Route)

[mymtw]

@jaredpalmer good example, but he is not work
in this row: https://gist.github.com/ryanflorence/efbe562332d4f1cc9331202669763741#file-data-js-L64
I see next error =>
TypeError: (0 , _reactRouter.matchPath) is not a function

my deps:
"react-router": "^3.0.2",

[dKab]

@mymtwcom I believe in his example @jaredpalmer uses react-router v4 API (available with "@next" tag)

[mymtw]

@dKab I know already about v4, but he still in alpha....

[dKab]

@mymtwcom Your problem solved then?

[loick]

Thanks @jaredpalmer, on my side it's working.

@mymtwcom What is your issue ?

Here is my code (using Redux-saga & translated routes):

return new Promise((resolve) => {
    const matches = Object.entries(translations.routes).reduce((found, [slug, url]) => {
      const match = matchPath(req.url, url, { exact: true, strict: false })
      if (match) {
        const component = getComponentFromSlug(routes, slug)
        found.push(component.fetchSaga ? component.fetchSaga(match) : false)
      }
      return found
    }, [])

    const fetchData = matches.filter(Boolean)
      .reduce((result, preloader) => result.concat(preloader), [])

    const ApiCallPromise = store.runSaga(waitAll(fetchData)).done

    resolve(ApiCallPromise.then(() => ({ store, req, res, locale, translations })))
  })

[viperin]

Would someone have a complete demo code of react-router and fetchData?
Thanks

[declanelcocks]

@loick Don't suppose you have a working example of your server-side fetching with redux-saga? Would be awesome to take a look, even if it's just as a gist.