React Transmit
Relay-inspired library based on Promises instead of GraphQL.
Inspired by: Building the Facebook Newsfeed with Relay (React blog)
Features
- API similar to the official Relay API, adapted for Promises.
- Higher-order Component (HoC) syntax is great for functional-style React.
- Composable Promise-based queries using fragments.
- Isomorphic architecture supports server-side rendering.
- Also works with 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)
import React from "react";
import Transmit from "react-transmit"; // Import Transmit.
import Story from "./Story";
const Newsfeed = React.createClass({
render () {
const {stories} = this.props; // Fragments are guaranteed.
return <div>{stories.map(story => <Story story={story} />)}</div>;
}
});
// Higher-order component that will fetch data for the above React component.
export default Transmit.createContainer(Newsfeed, {
initialVariables: {
count: 10 // Default variable.
},
fragments: {
// Fragment names become the Transmit prop names.
stories ({count}) {
// This "stories" query returns a Promise composed of 3 other Promises.
return Promise.all([
Story.getFragment("story", {storyId: 1}),
Story.getFragment("story", {storyId: 2}),
Story.getFragment("story", {storyId: 3})
]);
},
somethingDeferred () {
// Return the promise wrapped in a function to mark this fragment as non-critical.
return () => Promise.resolve(true);
}
}
});
Story.js (read the comments)
import React from "react";
import Transmit from "react-transmit"; // Import Transmit.
const Story = React.createClass({
render () {
const {story} = this.props; // Fragments are guaranteed.
return <p>{story.content}</p>;
}
});
export default Transmit.createContainer(Story, {
fragments: {
// This "story" fragment returns a Fetch API promise.
story ({storyId}) {
return fetch("https://some.api/stories/" + storyId).then(res => res.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.