react-simple-universal icon indicating copy to clipboard operation
react-simple-universal copied to clipboard

Implement data fetching

Open guidsen opened this issue 8 years ago • 5 comments

What will be the best way to pre fetch data? In #1 we've talked a bit about it as well. What options do we have and is most straightforward?

Extending the react-router Route component with a property that handles data fetching? How would we handle data fetching from server and from client, because from the client we have to make AJAX requests where in the server we can return some kind of db promise with results.

cc @d6u @jackfranklin

guidsen avatar Apr 14 '16 09:04 guidsen

Nice isomorphic fetch is implemented in react-starter-kit. They use package.json in subdir to separate client and server code like this:

{
  "private": true,
  "name": "fetch",
  "main": "./fetch.server.js",
  "browser": "./fetch.client.js"
}

See react-starter-kit /src/core/fetch

langpavel avatar Apr 14 '16 10:04 langpavel

@langpavel If I'm right that means that you always make requests to an URL, right?

guidsen avatar Apr 15 '16 09:04 guidsen

Yes. It's one simplest and common pattern. This allows you to change backend in the future. Of course if you wish different code path on server and client you should use this trick on some API facade module.

langpavel avatar Apr 15 '16 10:04 langpavel

@langpavel Do you want to help building this data fetching in this repo? I see react-starter-kit is also using universal-router https://github.com/kriasoft/react-starter-kit/blob/master/src/server.js#L19.

If I'm correct this is just the functionality to make sure both the server will wait for the promise to resolve before rendering the first page.

guidsen avatar Apr 15 '16 11:04 guidsen

I'm not sure how much functionality must be done, I'll try to watch on this more deeply when I have enough time

langpavel avatar Apr 15 '16 11:04 langpavel