rickwong/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.

react-transmit's Issues

(Transmit) Accessing router parameters for initial load

Hi,
I have a search page that takes it's query from the URL. Is there a way to set the initial variable for react-transmit? Currently it loads with a generic query, which brings back all results and then the client takes over and renders the query taken from the URL. I've done this using code that access the routers on the componentWillMount. Is there another way? I've read all the documentation and can't seem to work it out other than by using stores which is a bit overkill for what I want to currently do.

Use something other than string indexing to access queries?

Using the example on the README, I don't see a reason why this:

Story.getQuery("story", {storyId: 1})

Couldn't be done like this:

Story.queries.story({storyId: 1})

This has two upsides:

1. Clear object query hierarchy (this makes tooling like autocomplete much easier)
2. No magic string arguments passed to a function

Allow user to configure which Promise implementation to use

Related to #26

@RickWong

Yes, I believe that should work. Although on second thought, we should expose this feature with a more explicit API:

import Bluebird from 'bluebird';
import Transmit from 'react-transmit';

Transmit.setPromiseLibrary(Bluebird);

How to show a spinner during queries fetching and how to refresh queries themselves?

I have two questions:

• How to show a spinner during queries fetching?
• How can I refresh query itself?

Omit initialVariables render nothing

Given

Transmit.createContainer(App, {
  // initialVariables: {}  // without it
  fragements: { ... }
})

The page does not render anything, nor any errors.

Duplicate calls issue continues after re-rendering the component

Hi @RickWong

Could please confirm whether you are still getting duplicate calls when the resolution of the Promise is too fast ?! I do, and I'd like to know if I can ignore it.

I've seen there's a PR by @kasselTrankos with conflicts and your commit, fixing it.

Thanks!
CARLOS

Document the createContainer API and isomorphic rendering APIs

Now that the APIs for both have stabilized, they should be documented in the README to help people getting started with Transmit.

createContainer
https://github.com/RickWong/react-isomorphic-starterkit/blob/master/src%2Fviews%2FMain.js#L131-L153
https://github.com/RickWong/react-transmit/blob/master/src/example/Newsfeed.js#L70-L78

render
https://github.com/RickWong/react-transmit/blob/master/src/example.js#L5-L11
https://github.com/RickWong/react-isomorphic-starterkit/blob/master/src%2Fclient.js#L17

renderToString, injectIntoMarkup
https://github.com/RickWong/react-isomorphic-starterkit/blob/master/src/server.js#L34-L52

What does this actually do? I can't tell from the readme.

Sure, it works on Promises, and is similar to GraphQL's Relay. Yes, you've listed the tech specs.

But what does this actually do? I can't tell from the readme.

Thanks.

Use Object.assign instead of React.__spread

using react-transmit 3.1.7 as a dependency shows warnings about the use of depreacted React.__spread (even when using latest babel with react and es2015 presets)

Support use of react-dom-stream somehow

https://github.com/aickin/react-dom-stream

ReadMe issues

Hi-
Looking at the docs and trying to follow the control flow...feels like the docs don't really address it. The example does not make a lot of sense without the right introduction IMO.

Suggestions-

• Docs should mention that it's higher order component
• control flow…how are params passed in?
• CSS being first in examples files is confusing/distracting, takes up ~ first 25 lines. Example: https://github.com/RickWong/react-transmit/blob/master/src/example/Main.js Maybe export all to another JS file and import?

IMO, the docs would benefit from a simple example...perhaps with two components... explaining the connections, params and data flow between them. Thanks!

Option to compose queries before sending them

Can we have getQuery pass a query param so we have the option to return the query string instead of the query response?

myQuery (queryParams) {
  let query = ...
  if (queryParams.prefetch) {
    return Promise.resolve(query);
  } else {
    return fetchQuery(query);
  }
}

High Level: Does transmit support server side data retrieval & rendering?

First off, thanks for the amazing work on this and your starter kit.

I'm trying to add server-side retrieval to a Transmit.createContainer. Using your starter kit as a base. Testing for server vs client or using isomorphic-fetch. Does it support server-side (async) data retrieval, pre-render?

Doing so always passes nothing to the components props (even though I can log JSON that came in). Client side works fine. I've tried methods that return a promise or just raw data but nothing is passed to props. The only way I have gotten it working is to pull the initial data before renderToString is called (in server.js) and passing it along via Transmit.renderToString(Handler,props)...

Also sending the props data to the markup in Transmit.injectIntoMarkup(output, props, ...). This isn't very componentized though.

btw - You referenced react-async in the docs which seems to offer this (although I haven't tried it).

Any ideas?

Support isomorphic environments, don't rely on component state

Currently the container uses this.state and this.setState() to store the resolved data. It should store the data elsewhere so isomorphic apps can 1) resolve the data before rendering, 2) pass the resolved data onto the client.

switch between /posts/1 and posts/2 will not trigger queries

because /posts/1 and /posts/2 route to the same handler, so componentWillMount can not be invoked. React Only invoke render function.

I think react-transimit should implement componentWillReceiveProps method, like

componentWillReceiveProps: function(nextProps) {
    var needToLoad = !shallowEqual(
        nextProps.queryParams,
        this.props.queryParams
    );
    if (needToLoad) {
        this.setQueryParams(nextProps.queryParams);
    }
}

the new react-router implements the similar function https://github.com/rackt/react-router/blob/master/modules/experimental/AsyncProps.js#L40

Multiple requests over different routes.

I'm using react-router, and I currently have it set up like this.

// code omitted, App and Entry components defined

let AppContainer = Transmit.createContainer(App, {
    queries: {
        entries: function() {
           // code omitted
        }
    }
});

let EntryContainer = Transmit.createContainer(Entry, {
    queries: {
        entry: function(params) {
            // code omitted
        }
    }
});

let routes = (
    <Route handler={AppContainer} path="/">
        <DefaultRoute name="home" handler={ require('./page/home.jsx') } />
        <Route path="/entry/:entry" name="entry" handler={EntryContainer)} />
    </Route>
);

This setup nicely loads the entries query of the outer container on the server side, but the entry query of the inner route only loads client side, is there a way to do this completely on the backend?

React transmit components not getting rendered

When I export the dumb component (React component), everything works fine, although, when exporting the container provided by react transmit, the component stops rendering and no error is shown.

Component

import React from "react";
import JsSdk from "../../api";
import Transmit from "react-transmit";

 class Search extends React.Component {
 /* exporting this class renders the component perfectly */
  render() {
    return (
      <div>
        <h1>Search Page { this.props.result.toString() }</h1>
      </div>
    );
  }
}

export default Transmit.createContainer /* Doesn't render */ (Search, {
  fragments: {
    result() {
      return JsSdk.search.suggestFor("Arab");
    },
  },
});

Server.js

app.use(function *(next) {
    yield ((callback) => {
      match({routes, location}, (error, redirectLocation, renderProps) => {

        Transmit.renderToString(RouterContext, renderProps).then(({reactString, reactData}) => {
          let template = (
            `<!doctype html>
                <html lang="en-us">
                    <body>
                        <div id="react-root">${reactString}</div>
                    </body>
                </html>`
          );
        this.body = template;
          callback(null);
        }).catch(e => {
          callback(e);
        });
      });
    });
  });

Passing props to Transmit

Hi, I want to send props from the server to Transmit (I'm using the react-isomorphic-starterkit).

Si I have this on server:

renderProps.auth = 'authstring'
Transmit.renderToString(ReactRouter.RoutingContext, renderProps).then(({reactString, reactData}) => {
...
});

And then in my component definition, I have the following:

export default Transmit.createContainer(AppWrapper, {
    initialVariables: { },
    fragments: {
    doSomething: () => {
            //Want to read my authstring here 
        }
    }
});

Transmit example is incomplete

Currently the transmitted data is not yet available in child-containers. I think it should call transmit() recursively on child-containers.

`content.reactData` in `renderToString` callback is an array not an object?

I'm trying to update our NPM packages, and I'm having difficulty getting Transmit to work again.

In our server.js file, in our onPreResponse callback function, we're invoking:

Transmit.renderToString(App, props).then(function (content) { 
  /* Render app with content's React string and data. */ 
}).catch(function (err) { /* Handle error. */ });

Within the callback function for renderToString, the parameter content is an object with two props, reactString and reactData.

content.reactString is the HTML to render (as expected). But content.reactData is an empty array (whereas I'm expecting an object with the data for our app).

Would you have ideas as to why reactData would be an empty array rather than a populated object?

Thank you.

Remove __reactTransmitPacket after client side render

I use HistoryLocation with react-router with server-rendering.
In order to prevent, using the same window.__reactTransmitPacket for the same route all the time.

Shall we add

if (window.__reactTransmitPacket) delete window.__reactTransmitPacket

after
https://github.com/RickWong/react-transmit/blob/master/src/lib/render.js#L15

How does writing fit in?

Do you currently have a way to handle writes and updates? Say for instance I want to implement a post box to go along with the news feed example, how could I build that in such a way that the news feed would at least know to re-run it's query?

duplicate call all component under container, at twice access view usin react-route in client

Hi,
Im using react router, and call all twice when access to page twice or more
call render, fetch all twice.

react-transmit and react-router : "Required context `router` was not specified"

Hello,
I am a bit new in React development...
I try to use react-transmit and react-router together in a browser application, unfortunately I get the following errors:

Warning: Failed Context Types: Required context `router` was not specified in `e`. Check the render method of `Test2`.
react-0.13.2.js (line 19548)

Warning: owner-based and parent-based contexts differ (values: `undefined` vs `function (props, context) {
"use strict";

      // This constructor is overridden by mocks. The argument is used
      // by mocks to assert on what gets mounted.

      if ("production" !== "development") {
        ("production" !== "development" ? warning(
          this instanceof Constructor,
          'Something is calling a React component directly. Use a factory or ' +
          'JSX instead. See: http://fb.me/react-legacyfactory'
        ) : null);
      }

      // Wire up auto-binding
      if (this.__reactAutoBindMap) {
        bindAutoBindMethods(this);
      }

      this.props = props;
      this.context = context;
      this.state = null;

      // ReactClasses doesn't have constructors. Instead, they use the
      // getInitialState and componentWillMount methods for initialization.

      var initialState = this.getInitialState ? this.getInitialState() : null;
      if ("production" !== "development") {
        // We allow auto-mocks to proceed as if they're returning null.
        if (typeof initialState === 'undefined' &&
            this.getInitialState._isMockFunction) {
          // This is probably bad practice. Consider warning here and
          // deprecating this convenience.
          initialState = null;
        }
      }
      ("production" !== "development" ? invariant(
        typeof initialState === 'object' && !Array.isArray(initialState),
        '%s.getInitialState(): must return an object or null',
        Constructor.displayName || 'ReactCompositeComponent'
      ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));

      this.state = initialState;
    }`) for key (router) while mounting e (see: http://fb.me/react-context-by-parent)
react-0.13.2.js (line 19548)

TypeError: this.context.router is undefined
...ops.query))}},getHref:{value:function(){return this.context.router.makeHref(this...

Here is some simple code that produce these errors when you click on "Test2" :

test.jsx:

var App = React.createClass({
  render: function () {
    return (
      <div>
        <ul>
          <li><Link to="test">Test</Link></li>
          <li><Link to="test2">Test2</Link></li>
        </ul>

        <RouteHandler/>
      </div>
    );
  }
});

var Test2 = React.createClass({
  render: function () {
    return (
      <div>
        <ul>
          <li>Test2: {this.props.data}</li>
          <li><Link to="test">Link</Link></li> {/* Remove this line to remove errors */}
        </ul>
      </div>
    );
  }
});

var Test2Container = Transmit.createContainer(Test2, {
    queries: {
      data (queryParams) {
        return $.ajax({url: "data.json", dataType: 'json'});
      }
    }
});

var Test = React.createClass({
  render: function () {
    return (
      <div>
        Test
      </div>
    );
  }
});

var Router = ReactRouter;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var routes = (
  <Route handler={App} path="/">
    <DefaultRoute handler={Test} />
    <Route name="test" handler={Test} />
    <Route name="test2" handler={Test2Container} />
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('content'));
});

index.html:

<html>
  <head>
    <title>Hello React-Transmit</title>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.2/ReactRouter.min.js"></script>
    <script src="./react-transmit.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx;harmony=true" src="test.jsx"></script>
  </body>
</html>

data.json:

{
  "data": "Some data"
}

I have obtained react-transmit.js with the following commands:

$ npm install react-transmit
$ cd node_modules/react-transmit/
$ browserify src/lib/react-transmit.js --standalone Transmit | derequire > ../react-transmit.js

When I remove the line with the Link in the component "Test2" of test.jsx the errors disappear.

Note: as I do not use stuff like babelify, I cannot use ecmascript 6 syntax like:

export default Transmit.createContainer

Instead, I have given a specific name for the Transmit Container (Test2Container).

Do you have any clue?

renderToString() should never resolve reactData as an object

react-transmit/src/lib/renderToString.js

Line 43 in 00d23e7

resolve({reactString: reactString, reactData: {}});

Bug reported in RickWong/react-isomorphic-starterkit#70

How to set queryParams from react-router params

...
var PageHome = require('components/PageHome');
var PageMeasurements = require('react-proxy?name=page-measurements!components/PageMeasurements');
var PageMeasurementsTab = require('react-proxy?name=page-measurements-tab!components/PageMeasurementsTab');
var PageMeasurementsAdd = require('react-proxy?name=page-measurements-add!components/PageMeasurementsAdd');
var PageNotFound = require('react-proxy?name=page-not-found!components/PageNotFound');
var routes = (
  <Route name="app" path="/" handler={App}>
    <DefaultRoute name="page-home" handler={PageHome}/>
    <Route name="page-measurements" path="measurements" handler={PageMeasurements}>
      <Route name="page-measurements-tab" path=":category/:type" handler={PageMeasurementsTab}>
        <Route name="page-measurements-add" path="add" handler={PageMeasurementsAdd}/>
      </Route>
    </Route>
    <NotFoundRoute name="not-found" handler={PageNotFound}/>
  </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler, state) {
  React.render(<Handler data="xxx" queryParams={state.params}/>, document.body);
});

With 'PageMeasurementsTab' (Transmit component) I can't get data, queryParams prod.

With 'PageHome' (normal React component) I can get data, queryParams prod

In my case, with url 'measurements/:category/:type' i want 'Transmit' get data from '/api/measurements?category=:category&type=:type' instead of '/api/measurements'.

I try change queryParams in 'componentWillMount' :

componentWillMount: function() {
        this.props.setQueryParams({
            category: this.context.router.getCurrentParams().category,
            type: this.context.router.getCurrentParams().type
        });
    },

but 'Transmit' will get data two time.

Uncaught Error: Only root Transmit Containers should fetch fragments

After updating from 3.0.8 > 3.1.2, I received this error.

Uncaught Error: Only root Transmit Containers should fetch fragments

My temporary solution was to add the { initialVariables: {} } as an option in my Transmit.createContainer process.

Is it a requirement to have initialVariables: {} in Transmit.createContainer?

Example on readme

In the Newsfeed example, an array is returned from the render function of the Newsfeed component, which is not a valid return value.

Initial Variables required unnecesarily

First of all, nice project! I want to point out an issue I found recently. I tried implementing this in one of my projects but the Container wouldn't render so I ended up tracing the error to the componentWillMount lifecycle method of the Container, specifically to this line: https://github.com/RickWong/react-transmit/blob/master/src/lib/createContainer.js#L239. Going down that function call I noticed that this function returns false if the isRootContainer property of the Container is false, which in my case was because I hadn't declared initialVariables (https://github.com/RickWong/react-transmit/blob/master/src/lib/createContainer.js#L30). Once I set initialVariables to {} it worked as expected, but in my humble opinion that should have been uneccesary as I don't use any variables in my fragment functions. Or is this behaviour intended?

EDIT: Even if this behaviour is intended I don't think it should fail silently.

React Native support

A few small changes here and there, should enable React Native support.

https://twitter.com/rygu/status/582683864818167808

error handling

I can't find any example for correct error handling.

my code

class Comp1 extends React.Component {
  render() {
    return (
      <div>
        <strong>{this.props.foo}</strong>
        <Link to="/main">Index</Link>
      </div>
    );
  }
}


var num = 0;

const CompTransmitted = Transmit.createContainer(Comp1, {
  initialVariables: {
  },
  fragments: {
    foo: () => {
      return new Promise((resolve, reject) => {
        //return resolve("bar");
        reject(new Error("test error " + (++num)));
      });
    }
  }
});


export default class Comp2 extends React.Component {

  onFetch(promise) {
    return promise.then(result => {
      console.log("ON FETCH RESULT", result);
    }, e => {
      console.log("ON FETCH ERROR", e);
    })
  }
  render() {
    return (
      <CompTransmitted onFetch={this.onFetch} />
    )
  }
}

Console log

ON FETCH ERROR Error: test error 1(…)
ON FETCH ERROR Error: test error 2(…)
Test.js?eb08:26 Uncaught (in promise) Error: test error 1(…)
Test.js?eb08:26 Uncaught (in promise) Error: test error 2(…)

1. Is there any way to catch an error and display an error message inside the Comp1 component?
2. Why foo is resolved twice?

What about web sockets and alike?

Transmit looks fantastic and I cannot wait to give it a try. However, what immediately came to my mind is how one would include something like web sockets or any other continuous message system? For example, consider a chat application: You might want to load a batch of most recent messages on load with one GET request (that could be done with Transmit), but you then want to get subsequent messages via web sockets. How would you do that (with Transmit)?

Thank you very much for all your effort you put into this project!

Add .editorconfig file

Website: http://editorconfig.org/

Has great editor support:

• IntelliJ-family of IDEs
• Vim
• Emacs
• Atom
• Sublime
• TextMate

Example configuration: https://github.com/mollie/WooCommerce/blob/535db3164677b3c0cdc366e49ce76d197cb6ba82/.editorconfig

Solves the personal preference issue. (See #28)

(React Router) ScrollBehavior not works

render return null and then render the real component, ScrollBehavior not works

How to receive props in `createContainer`

How can I receive props from parent component (actually from redux store's connect HOC) inside Transmit.createContainer?

Given a scenario like below:

// UserList.js

class UserList extends Component {
  render () {
    return this.props.users.map(/* ... */);
  }
}

export default Transmit.createContainer(UserList, {
  /* how to receive props (page, dispatch, foo, bar, ...etc.) here? */
  fragments: {
    users (queryParams) {
      return () => userAPI.list({
         page: pageFromProps, // fetch data depending on props
      }).then(users => {
        dispatchFromProps(receiveUsers(users)); // dispatch action creator to update store
        return users;
      });
    },
  },
});

// MainPage.js

class MainPage extends Component {
  render() {
    return (
      <div>
        <UserList
          page={3}
          dispatch={reduxStore.dispatch}
          foo={reduxStore.getState().foo}
          bar={reduxStore.getState().bar}
        />
      </div>
    );
  }
}

Parameters in `fragments` never get updated.

They always seem to be stuck on their initialVariables values (a problem we didn't have in the previous major version of Transmit). And I'm a little at a loss at to how to update them, as the docs' example code appears to be out of date?

• react-transmit/src/example/Newsfeed.js

  Lines 50 to 73 in c0266b0

  	export default Transmit.createContainer(Newsfeed, {
  	/**
  	* Default query params.
  	*/
  	queryParams: {
  	currentNewsfeed: [],
  	nextStoryId: 1
  	},
  	queries: {
  	/**
  	* The "newsfeed" query will concatenate the next Story to the current newsfeed, and returns
  	* the updated newsfeed in a Promise.
  	*/
  	newsfeed (queryParams) {
  	return (
  	Story.getQuery(
  	"story", {storyId: queryParams.nextStoryId}
  	).then((nextStory) => {
  	return queryParams.currentNewsfeed.concat([nextStory]);
  	})
  	);
  	}
  	}
  	});

• react-transmit/src/example/Newsfeed.js

  Line 14 in c0266b0

  const newsfeed = this.props.newsfeed;

• react-transmit/src/example/Newsfeed.js

  Line 37 in c0266b0

  nextStoryId: this.props.queryParams.nextStoryId + 1

Where do the invocations of each function in the fragments object of createContainer get their parameters (their input values)?

Thank you.

What about Relay?

• Relay was released today
• Its APIs have changed, dramatically
• Its Network Layer abstraction might support Promises

Using `this.props.params` from React-Router within a fragment function

I have a component which, within its ComponentDidMount function, uses this.props.params.id to make an asynchronous call to an API and show results.

I'd like to replicate this behavior in a fragment function but the execution context (this) does not represent the component instance but the function. Therefore, I can't access this.props.

What should I do to use the information provided by React-Router within the fragment functions?

Thx!

Is this library support server-side rendering?

Is this library support server-side rendering? If yes, any example?

How to pass additonal data to react components not defined as fragments?

I would like to pass additional data to the transmit containers so that it can be accessed via 'this.props.foo' but not actually be defined as a fragment...as we only need to pass this data once on the server to the client...Thanks!

setQueryParams() fires all of queries

I have 3 queries in Container. When I invoke setQueryParams, I want to fire one of these queries. But setQueryParams fires all of these

renderToString() and setQueryParams() should return Promises

Because Promises are nicer to work with than callbacks.

_

High-level: What about Store(s)?

Just curious what becomes of Stores in this paradigm? Flow introduced the ideas of Stores as a way to keep consistent data across your different views (if notifications change for one view, state change pushes to all views). Relay solves this with a single store, and an understanding of different "entities".

In general, Transmit seems cool - easier to follow and a statically analyzable way to handle pre-loading on the server. 👍

Support optional deferred props (and spinner components)

Apparently Relay now specifies a defer feature that allows some of the props to not be required but optional (on first render). This means that the way Transmit used to work a long time ago, was actually correct. Spinners and other while-loading components are simply declared within if-else blocks.

Is react-transmit-native deprecated?

What is this?

Correct me if I am wrong but having a separate react-native library is not necessary since React Native now relies on React directly for its Component(CreateClass) API.

I only came to this conclusion when starting a project with the React Native version and got the below error when running tests. I have not looked at the internals as of yet, but assume the React Native library is looking for things that are no longer available in newer versions of React Native.

Currently using 0.39.2

    Seems you're trying to access 'ReactNative.createClass' from the 'react-native' package. Perhaps you meant to access 'React.createClass' from the 'react' package instead?
    
    For example, instead of:
    
      import React, { Component, View } from 'react-native';
    
    You should now do:
    
      import React, { Component } from 'react';
      import { View } from 'react-native';
    
    Check the release notes on how to upgrade your code - https://github.com/facebook/react-native/releases/tag/v0.25.1

Passing server-side request data into Transmit

Let's say we have a React component that presents user info as a function of an access token. The client stuffs that access token into a cookie. For isomorphic consistency it would be nice to be able to set up a Transmit query that results in that access token, so that when we render we can just get this.props.accessToken.

In a naive experiment I patched react-transmit to pass through some details of the request, but I wanted to ask you if there was a way to do this without a patch.

/**
 * Catch dynamic requests here to fire-up React Router.
 */
server.ext("onPreResponse", (request, reply) => {
    if (typeof request.response.statusCode !== "undefined") {
        return reply.continue();
    }

    Router.run(routes, request.path, (Handler, router) => {

        // Unpack request data.  <-----------------------------------------------------
        const { state, query } = request;

        Transmit.renderToString(
            Handler,

            {},

            // Pass the request data into `renderToString()` somehow?  <------------------
            { queryParams: { state: state, query: query } }

        ).then(({reactString, reactData}) => {
            let output = (
                `<!doctype html>
                <html lang="en-us">
                    <head>
                        <meta charset="utf-8">
                        <title>CyberU</title>
                        <link rel="shortcut icon" href="/favicon.ico">
                    </head>
                    <body>
                        <div id="react-root">${reactString}</div>
                    </body>
                </html>`
            );

            const webserver = process.env.NODE_ENV === "production" ? "" : "//localhost:8080";
            output = Transmit.injectIntoMarkup(output, reactData, [`${webserver}/dist/client.js`]);

            reply(output);
        }).catch((error) => {
            reply(error.stack).type("text/plain").code(500);
        });
    })
});

We can then write a Transmit query like:

export default Transmit.createContainer(Main, {
  queries: {
    accessToken (queryParams) {
      return new Promise((resolve, reject) => {
        const token = queryParams.state && queryParams.state.access_token || '';
        resolve(token);
      })
    }
  }
});

Does this make any sense? What is the best way to do this kind of thing?

Nested container

When I use react-router together with react-transmit, I have a following use case:

This is the route definition:

<Route path="/" component={Layout}>
    <IndexRoute component={Home}/>
</Route>

Both Layout and Home is or has react-transmit container, When render on server-side, only fragments in Layout resolved and pass into client-side.

I wonder if nested container is possible on isomorphic app, or is there any pattern I can use to have a global fragment (eg. user session).

Thanks!

Error in example

Following lines are trowing error while running the example.
I think fetch-rest API might have changed.
https://github.com/RickWong/react-transmit/blob/master/src/example/Story.js#L41-L42

Provide some test examples for react-transmit components

How to write unit-tests for react transmitted components. mocha+chai or jest. is there a some differences for react or react-transmitted components?. Can i test component without calling fetch method?