unfold/fetch-data

Declarative data fetching for Redux and React

fetch-data's Issues

React Router v4

Instead of a Provider type class that exposes registerDependency we could use the new staticContext:

static contextTypes = {
  router: PropTypes.shape({
    staticContext: PropTypes.object,
  }).isRequired,
}

componentWillMount() {
  const { staticContext } = this.context.router

  if (staticContext) {
    staticContext.registerDependency(this.dispatchIfNeeded(this.props))
  }
}

Recursively resolve requests

import { resolveRequestPromises } from '@unfold/fetch-data'

const renderApplication = () => renderToString(<Application />)

try {
  const markup = await resolveFetchRequests(renderApplication, { maxIterations: 2 })

  res.send(markup)
} catch (error) {
  next(error)
}

Support returning multiple actions from mapPropsToAction and mapPropsToRequest

As of now the following doesn't work:

// Fetch both a product and a page
connectFetchData({
  mapPropsToAction: ({ productId, parentPath }) => (
    Promise.all([
      actions.getProductById(productId),  
      actions.getPageByPath(parentPath)
    ])
  ),
  mapStateToProps: (state, { productId, parentPath }) => ({
    product: state.products.byId[productId],
    page: state.pages.byPath[parentPath],
  }),
})

It's easy to work around this by chaining multiple connectFetchData, but this prevents the actions from being fired in parallel. Ideally one would be allowed to return a Promise, but since we're using mapPropsToRequest to determine loading state this isn't trivial.

I suggest being able to return an array from mapPropsToAction that is dispatched in parallel in the middleware. To compute loading and error state something like this would probably be sufficient:

const loading = requests.some(request => request.loading)
const error = requests.find(request => request.error)