falcro

falcro

[work in progress]

falcor as a component

npm install react falcor falcro --save

// instantiate a model, matching paths to data sources
let model = new Model({
  cache: {...},
  source: new Router([...])
});
 
// include the Root component somewhere up in your component hierarchy
function App(){
  return <Root model={model}>
    <User name='threepointone' />
  </Root>;
}
 
// and then fetch anywhere in your app
function User({name}){
  return <Get query={`users.${name}['avatar_url', 'id']`}>{
    ({users, error, loading}}) => loading ?
      <div>loading...</div> :
      <img src={users[name].avatar_url} alt={users[name].id} />
  }</Get>;
}
 
// all the falcor goodies for free - batching, caching, .set/.call, etc
 
//BONUS - server side async rendering
renderToString(<App/>, model).then(html => res.send(html))

Model

(see falcor.Model)

Root

• model - instance of Model

Get

• query - falcor model query. accepts falcor-path-syntax
• children - a function, that will receive, on render -
  • ...value - ie, the result of the query
  • error - if errored
  • loading - true if a request is in flight
  • $ - actions on the model instance - setValue, call, and refresh (more to come)

renderToString(element, model)

• returns a promise, which resolves to the html

examples

use react-heatpack to run examples from /examples directory

todo

so much

• refreshing only the components that change
• streaming results
• redux/router scenarios (reduce/rewind/replay/etc)
• shallow render testing
• idents
• derefs
• etc etc