JS client side isomorphic only - httpRequest

Question

Question about the collection of storage data in applications with an isomorphic stream. (I use reaction, alt, iso and node, but the theory applies to other examples)

I have a flux drive ( http://alt.js.org/docs/stores/ ) that should receive data from api:

getState() { return { data : makeHttpRequest(url) } } 

and when the user goes through the SPA, more data will be downloaded via HTTP requests.

I want this application to be isomorphic so that I can display applications with full html, including the last part of the data server, and return it to the user for quick loading of the start page.

response.renderToString () allows me to display the application as html, and I can sow data using alt & iso like:

 storeData = { "MyStore" : {"key" : "value"}}; // set data for store alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data var content = React.renderToString(React.createElement(myApp)); // render react app to html 

The problem is that I will see errors when starting the js server, since the repository wants to make an HTTP request that it cannot fulfill (since xmlhttprequest does not exist in node)

What is the best way to solve this problem?

The only solution I can think of is to wrap the httprequest from the store using

 var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); ... if (ExecutionEnvironment.canUseDOM) { // make http request } else { // do nothing } 

Any better ideas? Thanks in advance.

Answer 1

I would recommend connecting to your Ajax or XMLHttpRequest library directly if you are working with a server. Just back it up with code that delivers data directly from your database or application.

Quick example:

 var noop= function(){} window.XMLHttpRequest= function(){ console.log("xhr created", arguments); return { open: function(method, url){ console.log("xhr open", method, url); // asynchronously respond setTimeout(function(){ // pull this data from your database/application this.responseText= JSON.stringify({ foo: "bar" }); this.status= 200; this.statusText= "Marvellous"; if(this.onload){ this.onload(); } // other libs may implement onreadystatechange }.bind(this), 1) }, // receive data here send: function(data){ console.log("xhr send", data); }, close: noop, abort: noop, setRequestHeader: noop, overrideMimeType: noop, getAllResponseHeaders: noop, getResponseHeader: noop, }; } $.ajax({ method: "GET", url: "foo/bar", dataType: "json", success: function(data){ console.log("ajax complete", data); }, error: function(){ console.log("something failed", arguments); } }); 

http://jsfiddle.net/qs8r8L4f/

I scored this in the last 5 minutes, mainly using the XMLHTTPRequest mdn page

However, if you use something not directly based on XMLHttpRequest, or explicitly node aware (for example, a superagent), you probably need to lay out the library function itself.

Other work done in this snippet will involve the use of errors and different types of content.