fetches data before rendering component on server

rogerjin12 · rogerjin12 · commit 5fdd453e31ab · 2017-06-01T21:19:45.000-07:00
diff --git a/hello.js b/hello.js
@@ -1,25 +1,15 @@
 import React from 'react';
 import Butter from 'buttercms'
+import Transmit from 'react-transmit';
 
 const butter = Butter('b60a008584313ed21803780bc9208557b3b49fbb');
 
 var Hello = React.createClass({
-  getInitialState: function() {
-    return {loaded: false};
-  },
-  componentWillMount: function() {
-    butter.post.list().then((resp) => {
-      this.setState({
-        loaded: true,
-        resp: resp.data
-      })
-    });
-  },
   render: function() {
-    if (this.state.loaded) {
+    if (this.props.posts) {
       return (
         <div>
-          {this.state.resp.data.map((post) => {
+          {this.props.posts.data.map((post) => {
             return (
               <div key={post.slug}>{post.title}</div>
             )
@@ -32,4 +22,13 @@ var Hello = React.createClass({
   }
 });
 
-export default Hello;
+export default Transmit.createContainer(Hello, {
+  // These must be set or else it would fail to render
+  initialVariables: {},
+  // Each fragment will be resolved into a prop
+  fragments: {
+    posts() {
+      return butter.post.list().then((resp) => resp.data);
+    }
+  }
+});
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "express": "^4.15.3",
     "path": "^0.12.7",
     "react": "^0.14.8",
-    "react-dom": "^0.14.8"
+    "react-dom": "^0.14.8",
+    "react-transmit": "^3.2.0"
   },
   "devDependencies": {
     "webpack": "^1.12.14",
diff --git a/server.js b/server.js
@@ -4,16 +4,18 @@ import path from 'path';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import Hello from './Hello.js';
+import Transmit from 'react-transmit';
 
 function handleRender(req, res) {
-  const html = ReactDOMServer.renderToString(<Hello />);
+  Transmit.renderToString(Hello).then(({reactString, reactData}) => {
+    fs.readFile('./index.html', 'utf8', function (err, data) {
+      if (err) throw err;
 
-  fs.readFile('./index.html', 'utf8', function (err, data) {
-    if (err) throw err;
+      const document = data.replace(/<div id="app"><\/div>/, `<div id="app">${reactString}</div>`);
+      const output = Transmit.injectIntoMarkup(document, reactData, ['/build/client.js']);
 
-    const document = data.replace(/<div id="app"><\/div>/, `<div id="app">${html}</div>`);
-
-    res.send(document);
+      res.send(document);
+    });
   });
 }
 
