Add automatic SSR data hydration support

README.md

@@ -255,3 +255,56 @@ export default withQuery((props) => {
     loadingComponent: AnotherLoadingComponent,
 })(UserProfile)
 ```
+### Server Side Rendering
+
+One common challenge with server-side rendering is hydrating client. The data used in the view needs to be available when the page loads so that React can hydrate the DOM with no differences. This technique will allow you send all of the necessary data with the initial HTML payload. The code below works with `withQuery` to track and hydrate data automatically. Works with static queries and subscriptions.
+
+On the server:
+
+```jsx harmony
+import { onPageLoad } from 'meteor/server-render'
+import { SSRDataStore } from 'meteor/cultofcoders:grapher-react'
+
+onPageLoad(async sink => {
+	const store = new SSRDataStore()
+
+	sink.renderIntoElementById(
+		'root',
+		renderToString(
+			store.collectData(<App />)
+		)
+    )
+
+	const storeTags = store.getScriptTags()
+	sink.appendToBody(storeTags)
+})
+```
+
+On the client:
+
+```jsx harmony
+import { DataHydrator } from 'meteor/cultofcoders:grapher-react'
+
+Meteor.startup(async () => {
+	await DataHydrator.load()
+	ReactDOM.hydrate(<App />, document.getElementById('root'))
+})
+```
+
+Use `withQuery` on a component:
+
+```jsx harmony
+const SomeLoader = ({ data, isLoading, error }) => {
+	if (error) {
+		return <div>{error.reason}</div>
+	}
+
+	return <SomeList items={data} />
+}
+
+export default withQuery(
+	props => {
+		return GetSome.clone()
+	},
+)(SomeLoader)
+```

lib/DataHydrator.js

@@ -0,0 +1,45 @@
+import { Promise } from 'meteor/promise'
+import { generateQueryId } from './utils.js';
+
+export default {
+
+    decodeData(data) {
+        const decodedEjsonString = decodeURIComponent(data);
+        if (!decodedEjsonString) return null;
+
+        return EJSON.parse(decodedEjsonString);
+    },
+
+    load(optns) {
+        const defaults = {
+            selfDestruct: 3000
+        }
+        const options = Object.assign({}, defaults, optns)
+
+        return new Promise((resolve, reject) => {
+            // Retrieve the payload from the DOM
+            const dom = document.querySelectorAll(
+                'script[type="text/grapher-data"]',
+                document
+            );
+            const dataString = dom && dom.length > 0 ? dom[0].innerHTML : '';
+            const data = this.decodeData(dataString) || {};
+            window.grapherQueryStore = data
+
+            // Self destruct the store so that dynamically loaded modules
+            // do not pull from the store in the future
+            setTimeout(() => {
+                window.grapherQueryStore = {};
+            }, options.selfDestruct)
+
+            resolve(data);
+        });
+    },
+
+    getQueryData(query) {
+        const id = generateQueryId(query);
+        const data = window.grapherQueryStore[id]
+        return data
+    }
+
+}

lib/SSRDataStore.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import { EJSON } from 'meteor/ejson';
+import { generateQueryId } from './utils.js';
+export const SSRDataStoreContext = React.createContext(null);
+
+class DataStore {
+    storage = {}
+
+    add(query, value) {
+        const key = generateQueryId(query)
+        this.storage[key] = value
+    }
+
+    getData() {
+        return this.storage
+    }
+}
+
+export default class SSRDataStore{
+    constructor() {
+        this.store = new DataStore()
+    }
+
+    collectData(children) {
+        return <SSRDataStoreContext.Provider value={this.store}>{children}</SSRDataStoreContext.Provider>
+    }
+
+    encodeData(data) {
+        data = EJSON.stringify(data)
+        return encodeURIComponent(data)
+    }
+
+    getScriptTags() {
+        const data = this.store.getData()
+
+        return `<script type="text/grapher-data">${this.encodeData(data)}</script>`
+    }
+}

lib/utils.js

@@ -0,0 +1,3 @@
+export const generateQueryId = function (query) {
+    return `${query.queryName}::${EJSON.stringify(query.params)}`;
+}

lib/withReactiveQuery.js

@@ -1,5 +1,7 @@
 import {withTracker} from 'meteor/react-meteor-data';
 import {ReactiveVar} from 'meteor/reactive-var';
+import DataHydrator from './DataHydrator.js';
+import { Meteor } from 'meteor/meteor';
 
 /**
  * Wraps the query and provides reactive data fetching utility
@@ -14,24 +16,48 @@ export default function withReactiveContainer(handler, config, QueryComponent) {
     return withTracker((props) => {
         const query = handler(props);
 
-        const subscriptionHandle = query.subscribe({
-            onStop(err) {
-                if (err) {
-                    subscriptionError.set(err);
-                }
-            },
-            onReady() {
-                subscriptionError.set(null);
-            }
-        });
+        let isLoading
+        let data
+        let error
 
-        const isReady = subscriptionHandle.ready();
+        // For server-side-rendering, immediately fetch the data
+        // and save it in the data store for this request
+
+        if(Meteor.isServer) {
+            data = query.fetch();
+            isLoading = false;
+            props.dataStore.add(query, data);
+        } else {
+            const subscriptionHandle = query.subscribe({
+                onStop(err) {
+                    if (err) {
+                        subscriptionError.set(err);
+                    }
+                },
+                onReady() {
+                    subscriptionError.set(null);
+                }
+            });
+
+            isLoading = !subscriptionHandle.ready();
 
-        const data = query.fetch();
+            // Check the SSR query store for data 
+            if(Meteor.isClient && window && window.grapherQueryStore) {
+                const ssrData = DataHydrator.getQueryData(query);
+                if(ssrData) {
+                    isLoading = false;
+                    data = ssrData;
+                }
+            }
 
+            if(!data) {
+                data = query.fetch();
+            }
+        }
+
         return {
             grapher: {
-                isLoading: !isReady,
+                isLoading,
                 data,
                 error: subscriptionError,
             },

lib/withStaticQuery.js

@@ -1,17 +1,48 @@
 import React from 'react';
 import getDisplayName from './getDisplayName';
+import { Meteor } from 'meteor/meteor';
+import DataHydrator from './DataHydrator.js';
 
 export default function withStaticQueryContainer(WrappedComponent) {
     /**
      * We use it like this so we can have naming inside React Dev Tools
      * This is a standard pattern in HOCs
      */
     class GrapherStaticQueryContainer extends React.Component {
-        state = {
-            isLoading: true,
-            error: null,
-            data: [],
-        };
+        constructor(props) {
+            super(props);
+
+            this.state = {
+                isLoading: true,
+                error: null,
+                data: [],
+            };
+
+            const { query } = props;
+
+            // Check the SSR query store for data 
+            if(Meteor.isClient && window && window.grapherQueryStore) {
+                const data = DataHydrator.getQueryData(query);
+                if(data) {
+                    this.state = {
+                        isLoading: false,
+                        data
+                    };
+
+                }
+            }
+
+            // For server-side-rendering, immediately fetch the data
+            // and save it in the data store for this request
+            if(Meteor.isServer) {
+                const data = query.fetch();
+                this.state = {
+                    isLoading: false,
+                    data
+                };
+                props.dataStore.add(query, data);
+            }
+        }
 
         componentWillReceiveProps(nextProps) {
             const {query} = nextProps;
@@ -20,7 +51,11 @@ export default function withStaticQueryContainer(WrappedComponent) {
 
         componentDidMount() {
             const {query, config} = this.props;
-            this.fetch(query);
+
+            // Do not fetch is we already have the data from SSR hydration
+            if(this.state.isLoading === true) {
+                this.fetch(query);
+            }
 
             if (config.pollingMs) {
                 this.pollingInterval = setInterval(() => {

main.client.js

@@ -15,4 +15,8 @@ export {
 
 export {
     default as createQueryContainer
-} from './legacy/createQueryContainer.js';
+} from './legacy/createQueryContainer.js';
+
+export {
+    default as DataHydrator
+} from './lib/DataHydrator.js';

main.server.js

@@ -15,4 +15,8 @@ export {
 
 export {
     default as createQueryContainer
-} from './legacy/createQueryContainer.js';
+} from './legacy/createQueryContainer.js';
+
+export {
+    default as SSRDataStore
+} from './lib/SSRDataStore.js';

package.js

@@ -20,6 +20,7 @@ Package.onUse(function (api) {
         'react-meteor-data@0.2.15',
         'cultofcoders:grapher@1.2.8_1',
         'tmeasday:check-npm-versions@0.2.0',
+        'ejson'
     ]);
 
     api.mainModule('main.client.js', 'client');

withQuery.js

@@ -5,6 +5,7 @@ import withReactiveQuery from './lib/withReactiveQuery';
 import withQueryContainer from './lib/withQueryContainer';
 import withStaticQuery from './lib/withStaticQuery';
 import checkOptions from './lib/checkOptions';
+import { SSRDataStoreContext } from './lib/SSRDataStore.js'
 
 export default function (handler, _config = {}) {
     checkOptions(_config);
@@ -14,19 +15,26 @@ export default function (handler, _config = {}) {
         const queryContainer = withQueryContainer(component);
 
         if (!config.reactive) {
-            const staticQueryContainer = withStaticQuery(queryContainer);
+            const StaticQueryContainer = withStaticQuery(queryContainer);
 
             return function (props) {
                 const query = handler(props);
 
-                return React.createElement(staticQueryContainer, {
-                    query,
-                    props,
-                    config
-                })
+                return (
+                    <SSRDataStoreContext.Consumer>
+                        {dataStore => <StaticQueryContainer query={query} props={props} config={config} dataStore={dataStore} />}
+                    </SSRDataStoreContext.Consumer>
+                )
             }
         } else {
-            return withReactiveQuery(handler, config, queryContainer);
+            const ReactiveQueryContainer = withReactiveQuery(handler, config, queryContainer);
+            return function(props) { 
+                return (
+                    <SSRDataStoreContext.Consumer>
+                        {dataStore => <ReactiveQueryContainer dataStore={dataStore} />}
+                    </SSRDataStoreContext.Consumer>
+                )
+            }
         }
     };
 }