diff --git a/README.md b/README.md index 52ecfcb..0b44eba 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,8 @@ **For a full examples, see**: -* https://github.com/damassi/react-relay-network-modern-ssr-example -* https://github.com/damassi/react-relay-network-modern-ssr-todomvc +- https://github.com/damassi/react-relay-network-modern-ssr-example +- https://github.com/damassi/react-relay-network-modern-ssr-todomvc # Server @@ -51,17 +51,13 @@ const network = new RelayNetworkLayer([ // First, kick off Relay requests with an initial render ReactDOMServer.renderToString(); -// Second, collect the data +// Second, await while all data were recieved from graphql server const relayData = await relayServerSSR.getCache(); // Third, render the app a second time now that the Relay store has been primed -// and send HTML and bootstrap data to the client for rehydration. (setTimeout is -// used to ensure that async resolution inside of QueryRenderer completes once -// data is provided. -setTimeout(() => { - const appHtml = ReactDOMServer.renderToString(); - sendHtml(appHtml, relayData); -}, 0) +// and send HTML and bootstrap data to the client for rehydration. +const appHtml = ReactDOMServer.renderToString(); +sendHtml(appHtml, relayData); ``` # Client diff --git a/src/server.js b/src/server.js index 84be64a..ad415bb 100644 --- a/src/server.js +++ b/src/server.js @@ -71,6 +71,13 @@ export default class RelayServerSSR { } async getCache(): Promise { + this.log('Call getCache() method'); + + // ensure that async resolution in Routes completes + await new Promise(resolve => { + setTimeout(resolve, 0); + }); + const arr = []; const keys = Array.from(this.cache.keys()); for (let i = 0; i < keys.length; i++) { @@ -78,6 +85,12 @@ export default class RelayServerSSR { const payload: any = await this.cache.get(keys[i]); arr.push([keys[i], payload]); } + + // ensure that async resolution inside of QueryRenderer completes + await new Promise(resolve => { + setTimeout(resolve, 0); + }); + this.log('Recieved all payloads', arr.length); return arr; }