View live demo

React Transmit

Relay-inspired library based on Promises instead of GraphQL.

Inspired by: Building the Facebook Newsfeed with Relay (React blog)

Features

• Implements the official Relay API methods.
• Higher-order component (HOC) syntax just like Relay.
• Declare composable Promise-based queries in HOCs.
• Isomorphic architecture supports server-side rendering.
• Works with React 0.12 and 0.13, and React Native!

Installation

# For web or Node:
npm install react-transmit
# For React Native:
npm install react-transmit-native

Usage

Newsfeed.js (read the comments)

importReactfrom"react";importTransmitfrom"react-transmit";// Import Transmit.importStoryfrom"./Story";constNewsfeed=React.createClass({render(){conststories=this.props.stories;// Transmit props are guaranteed.returnstories.map((story)=><Storystory={story}/>);// Pass down props.}});// Higher-order component that will do queries for the above React component.exportdefaultTransmit.createContainer(Newsfeed,{queryParams: {count: 10// Default query params.},queries: {// Query names become the Transmit prop names. stories(queryParams){// This "stories" query returns a Promise composed of 3 other Promises.returnPromise.all([Story.getQuery("story",{storyId: 1}),Story.getQuery("story",{storyId: 2}),Story.getQuery("story",{storyId: 3})]);}}});

Story.js (read the comments)

importReactfrom"react";importTransmitfrom"react-transmit";// Import Transmit.constStory=React.createClass({render(){conststory=this.props.story;// Passed down props.return<p>{story.content}</p>;}});exportdefaultTransmit.createContainer(Story,{queries: {// This "story" query returns a Fetch API promise.story(queryParams){returnfetch("https://some.api/stories/"+queryParams.storyId).then(resp=>resp.json());}}});

Documentation

See DOCS.md

Community

Let's start one together! After you ★Star this project, follow me @Rygu on Twitter.

License

BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.