Skip to content
This repository has been archived by the owner. It is now read-only.
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

View live demo

React Transmit

Relay-inspired library based on Promises instead of GraphQL.

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

version license Package Quality npm installs downloads

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.

You can’t perform that action at this time.