Initialize a new HTTP client for each web request

[koistya]

In the context of building isomorphic (universal) apps, it's better to initialize a new HTTP client for each web request during server-side rendering, it unlocks a couple of optimization techniques. This HTTP client can be used now as follows:

Before

import fetch from '../../core/fetch';
export default {
  path: '/posts/:id',
  async action({ params }) {
    const resp = await fetch(`/api/posts/${params.id}`);
    const data = await resp.json();
    return { title: data.title, component: <Post {...data} /> };
  }
}

After

export default {
  path: '/posts/:id',
  async action({ params, fetch }) {
    const resp = await fetch(`/api/posts/${params.id}`);
    const data = await resp.json();
    return { title: data.title, component: <Post {...data} /> };
  }
}

• Add src/createFetch.js that provides deafult values for fetch
• Remove src/core/fetch in favor to isomorphic-fetch
• Initialize a new HTTP client utility (fetch) for each HTTP request, see src/server.js
• Refactor config.js to have a single export, it's only supposed to be used on the server
• Pass some config info from server to client, serialize it inside Html component into window.App variable
• Remove src/core folder, it's better to put core framework modules (router.js, history.js etc.) right into the /src folder

[langpavel]

Looks similar to one I have on redux branch, definitely better than global import. Have you HoC letting you access fetch in any component?

[koistya]

Currently, the fetch function is passed via React's context:

class MyComponent extends React.Component {
  static contextTypes = { fetch: PropTypes.func.isRequired };
  handleClick = (event) => {
    this.context.fetch('/api/products').then(x => x.json()).then(data => this.setState({ data });
  }
  render() { ... }
}

[phpeek]

@koistya Do You plan to merge it ? This might be a BC break.

[langpavel]

@phpeek Yes, this is breaking change, but I really like see this discussion again.
Singletons like fetch are evil especially on server.
Note that current implementation of fetch needs passing credentials manually if needed... now you can handle this on one place.

[langpavel]

Example here is on router. But I believe users are importing fetch on more nested components so HoC implementation and React HoC component withFetch() which correctly bridge context will be needed for users.

[langpavel]

add credentials: 'same-origin' here?

[koistya]

@phpeek yes, we need to move the project forward, in all my universal web app projects I had to initialize a new HTTP client object for each web request on the Node.js side. This must be included into the boilerplate project in one way or another. And the remaining updates in this PR is just an attempt to simplify the project structure a little. It shouldn't be hard to merge them into your project, assuming you're using a good Diff and 3-way Merge Tool (GUI). What's your concern with that?

[epozsh]

@langpavel So now how i will use fetch on redux actions?

[langpavel]

@Shadowman4205 Same way as you did. fetch helper is still here.

[epozsh]

@langpavel u mean i will use this way

import fetch from '../createFetch';

cause i get an error

TypeError: __webpack_require__.i(...)(...).then is not a function .....

- test.js:18
    ...src/actions/test.js:18:1

  - next
......

18-> is return await fetch(query) where query is url /api/v/.....

[epozsh]

I tried this

import createFetch from '../createFetch';
import config from '../config';

const fetch = createFetch({baseUrl: config.api.serverUrl});

and it say i cannot use config on client side.
so i tried

const fetch = createFetch({baseUrl: null});

but i get

Error: only absolute urls are supported

[langpavel]

@Shadowman4205
You can use fetch helper in Redux action like this:

export function myAction(data) {
  return async (dispatch, getState, { client, history, fetch }) => { // see all helpers in src/store/createHelpers.js
    dispatch({ type: 'MY_ACTION_START' /* ... */ });
    // await fetch(...)
    dispatch({ type: 'MY_ACTION_SUCCESS' /* ... */ });
  }
}

[epozsh]

@langpavel
In my routes i am doing dispatch(myAction)
but then i am getting

TypeError: fetch is not a function

[epozsh]

Ok i had to write all

return async (dispatch, getState, { client, history, fetch })
not only
return async (dispatch, getState, { fetch })

[langpavel]

@Shadowman4205 Why you cannot write only return async (dispatch, getState, { fetch }) => { ... } ?