https://github.com/RickWong/react-transmit

Relay-inspired library based on Promises instead of GraphQL.
https://github.com/RickWong/react-transmit

component-driven graphql javascript promises react relay

Last synced: 3 months ago
JSON representation

Relay-inspired library based on Promises instead of GraphQL.

• Host: GitHub
• URL: https://github.com/RickWong/react-transmit
• Owner: RickWong
• License: bsd-3-clause
• Archived: true
• Created: 2015-03-22T23:31:41.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-07-28T22:04:37.000Z (over 7 years ago)
• Last Synced: 2024-10-20T07:20:12.001Z (3 months ago)
• Topics: component-driven, graphql, javascript, promises, react, relay
• Language: JavaScript
• Homepage:
• Size: 154 KB
• Stars: 1,314
• Watchers: 38
• Forks: 61
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-components-all - react-transmit - Relay-inspired library based on Promises instead of GraphQL. (Uncategorized / Uncategorized)
• awesome-list - react-transmit - Relay-inspired library based on Promises instead of GraphQL. (Code Design / Communication with server)
• awesome-react-components - react-transmit - Relay-inspired library based on Promises instead of GraphQL. (Code Design / Communication with server)
• awesome-react-components - react-transmit - Relay-inspired library based on Promises instead of GraphQL. (Code Design / Communication with server)

README

        
![](http://i.imgur.com/X3JE4Ev.png?1)

[View live demo](https://edealer.nl/react-transmit/) 

# React Transmit

[Relay](https://facebook.github.io/relay/)-inspired library based on Promises instead of GraphQL.

Inspired by: [Building the Facebook Newsfeed with Relay](http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html) (React blog)

![version](https://img.shields.io/npm/v/react-transmit.svg) ![license](https://img.shields.io/npm/l/react-transmit.svg) [![Package Quality](http://npm.packagequality.com/shield/react-transmit.svg)](http://packagequality.com/#?package=react-transmit) ![npm installs](https://img.shields.io/npm/dt/react-transmit.svg) ![downloads](https://img.shields.io/github/downloads/RickWong/react-transmit/latest/total.svg)

## 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

```bash

	# For web or Node:

	npm install react-transmit

	

	# For React Native:

	npm install react-transmit-native

```

## Usage

**Newsfeed.js** (read the comments)

````js

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 
{stories.map(story => )}
;

	}

});


// 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)

````js

import React    from "react";

import Transmit from "react-transmit";  // Import Transmit.

const Story = React.createClass({

	render () {

		const {story} = this.props; // Fragments are guaranteed.

		

		return 
{story.content}
;

	}

});


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](https://github.com/RickWong/react-transmit/blob/master/DOCS.md)

## Community

Let's start one together! After you ★Star this project, follow me [@Rygu](https://twitter.com/rygu)

on Twitter.

## License

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