hhy5277 / react-transmit

Relay-inspired library based on Promises instead of GraphQL.

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

• 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.